diff --git a/client/.babelrc.js b/client/.babelrc.js index 628d793c192..2c6c4841e5e 100644 --- a/client/.babelrc.js +++ b/client/.babelrc.js @@ -54,6 +54,7 @@ const config = { 'sql', 'svg', 'typescript', + 'tsx', 'xml' ], theme: 'default', diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index e3c260b0344..bcd7ca4dbd5 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/client/src/templates/Challenges/classic/editor.tsx @@ -1,5 +1,6 @@ import * as ReactDOMServer from 'react-dom/server'; import Loadable from '@loadable/component'; + // eslint-disable-next-line import/no-duplicates import type * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'; import type { @@ -68,10 +69,18 @@ import { getScrollbarWidth } from '../../../utils/scrollbar-width'; import { isProjectBased } from '../../../utils/curriculum-layout'; import envConfig from '../../../../config/env.json'; import LowerJaw from './lower-jaw'; +// Direct from npm, license in react-types-licence +import reactTypes from './react-types.json'; + import './editor.css'; const MonacoEditor = Loadable(() => import('react-monaco-editor')); +const monacoModelFileMap = { + tsxFile: 'index.tsx', + reactTypes: 'react.d.ts' +}; + export interface EditorProps { attempts: number; canFocus: boolean; @@ -353,15 +362,44 @@ const Editor = (props: EditorProps): JSX.Element => { const { usesMultifileEditor = false } = props; monacoRef.current = monaco; + monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ + ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(), + jsx: monaco.languages.typescript.JsxEmit.Preserve, + allowUmdGlobalAccess: true + }); + defineMonacoThemes(monaco, { usesMultifileEditor }); // If a model is not provided, then the editor 'owns' the model it creates // and will dispose of that model if it is replaced. Since we intend to // swap and reuse models, we have to create our own models to prevent // disposal. + const setupTSModels = (monaco: typeof monacoEditor) => { + const reactFile = monaco.Uri.file(monacoModelFileMap.reactTypes); + monaco.editor.createModel( + reactTypes['react-18'], + 'typescript', + reactFile + ); + + const file = monaco.Uri.file(monacoModelFileMap.tsxFile); + return monaco.editor.createModel('', 'typescript', file); + }; + + // TODO: make sure these aren't getting created over and over + function createModel(contents: string, language: string) { + if (language !== 'typescript') { + return monaco.editor.createModel(contents, language); + } else { + const model = setupTSModels(monaco); + model.setValue(contents); + return model; + } + } + const model = dataRef.current.model || - monaco.editor.createModel( + createModel( challengeFile?.contents ?? '', modeMap[challengeFile?.ext ?? 'html'] ); @@ -1328,6 +1366,15 @@ const Editor = (props: EditorProps): JSX.Element => { { + const reactFile = monaco.Uri.file(monacoModelFileMap.reactTypes); + const file = monaco.Uri.file(monacoModelFileMap.tsxFile); + // Any model we've created has to be manually disposed of to prevent + // memory leaks. + editor.getModel()?.dispose(); + monaco.editor.getModel(reactFile)?.dispose(); + monaco.editor.getModel(file)?.dispose(); + }} onChange={onChange} options={{ ...options, folding: !hasEditableRegion() }} theme={editorTheme} diff --git a/client/src/templates/Challenges/classic/react-types-license b/client/src/templates/Challenges/classic/react-types-license new file mode 100644 index 00000000000..48ea6616b5b --- /dev/null +++ b/client/src/templates/Challenges/classic/react-types-license @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) Microsoft Corporation. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE diff --git a/client/src/templates/Challenges/classic/react-types.json b/client/src/templates/Challenges/classic/react-types.json new file mode 100644 index 00000000000..c4e908a4c0e --- /dev/null +++ b/client/src/templates/Challenges/classic/react-types.json @@ -0,0 +1,3 @@ +{ + "react-18": "// NOTE: Users of the `experimental` builds of React should add a reference\n// to 'react/experimental' in their project. See experimental.d.ts's top comment\n// for reference and documentation on how exactly to do it.\n\n/// \n\nimport * as CSS from \"csstype\";\nimport * as PropTypes from \"prop-types\";\n\ntype NativeAnimationEvent = AnimationEvent;\ntype NativeClipboardEvent = ClipboardEvent;\ntype NativeCompositionEvent = CompositionEvent;\ntype NativeDragEvent = DragEvent;\ntype NativeFocusEvent = FocusEvent;\ntype NativeInputEvent = InputEvent;\ntype NativeKeyboardEvent = KeyboardEvent;\ntype NativeMouseEvent = MouseEvent;\ntype NativeTouchEvent = TouchEvent;\ntype NativePointerEvent = PointerEvent;\ntype NativeTransitionEvent = TransitionEvent;\ntype NativeUIEvent = UIEvent;\ntype NativeWheelEvent = WheelEvent;\n\n/**\n * Used to represent DOM API's where users can either pass\n * true or false as a boolean or as its equivalent strings.\n */\ntype Booleanish = boolean | \"true\" | \"false\";\n\n/**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin MDN}\n */\ntype CrossOrigin = \"anonymous\" | \"use-credentials\" | \"\" | undefined;\n\ndeclare const UNDEFINED_VOID_ONLY: unique symbol;\n\n/**\n * The function returned from an effect passed to {@link React.useEffect useEffect},\n * which can be used to clean up the effect when the component unmounts.\n *\n * @see {@link https://react.dev/reference/react/useEffect React Docs}\n */\ntype Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };\ntype VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };\n\n// eslint-disable-next-line @definitelytyped/export-just-namespace\nexport = React;\nexport as namespace React;\n\ndeclare namespace React {\n //\n // React Elements\n // ----------------------------------------------------------------------\n\n /**\n * Used to retrieve the possible components which accept a given set of props.\n *\n * Can be passed no type parameters to get a union of all possible components\n * and tags.\n *\n * Is a superset of {@link ComponentType}.\n *\n * @template P The props to match against. If not passed, defaults to any.\n * @template Tag An optional tag to match against. If not passed, attempts to match against all possible tags.\n *\n * @example\n *\n * ```tsx\n * // All components and tags (img, embed etc.)\n * // which accept `src`\n * type SrcComponents = ElementType<{ src: any }>;\n * ```\n *\n * @example\n *\n * ```tsx\n * // All components\n * type AllComponents = ElementType;\n * ```\n *\n * @example\n *\n * ```tsx\n * // All custom components which match `src`, and tags which\n * // match `src`, narrowed down to just `audio` and `embed`\n * type SrcComponents = ElementType<{ src: any }, 'audio' | 'embed'>;\n * ```\n */\n type ElementType

=\n | { [K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never }[Tag]\n | ComponentType

;\n\n /**\n * Represents any user-defined component, either as a function or a class.\n *\n * Similar to {@link JSXElementConstructor}, but with extra properties like\n * {@link FunctionComponent.defaultProps defaultProps } and\n * {@link ComponentClass.contextTypes contextTypes}.\n *\n * @template P The props the component accepts.\n *\n * @see {@link ComponentClass}\n * @see {@link FunctionComponent}\n */\n type ComponentType

= ComponentClass

| FunctionComponent

;\n\n /**\n * Represents any user-defined component, either as a function or a class.\n *\n * Similar to {@link ComponentType}, but without extra properties like\n * {@link FunctionComponent.defaultProps defaultProps } and\n * {@link ComponentClass.contextTypes contextTypes}.\n *\n * @template P The props the component accepts.\n */\n type JSXElementConstructor

=\n | ((\n props: P,\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-stateless-function-components React Docs}\n */\n deprecatedLegacyContext?: any,\n ) => ReactNode)\n | (new(\n props: P,\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}\n */\n deprecatedLegacyContext?: any,\n ) => Component);\n\n /**\n * A readonly ref container where {@link current} cannot be mutated.\n *\n * Created by {@link createRef}, or {@link useRef} when passed `null`.\n *\n * @template T The type of the ref's value.\n *\n * @example\n *\n * ```tsx\n * const ref = createRef();\n *\n * ref.current = document.createElement('div'); // Error\n * ```\n */\n interface RefObject {\n /**\n * The current value of the ref.\n */\n readonly current: T | null;\n }\n\n interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES {\n }\n /**\n * A callback fired whenever the ref's value changes.\n *\n * @template T The type of the ref's value.\n *\n * @see {@link https://react.dev/reference/react-dom/components/common#ref-callback React Docs}\n *\n * @example\n *\n * ```tsx\n *

console.log(node)} />\n * ```\n */\n type RefCallback = {\n bivarianceHack(\n instance: T | null,\n ):\n | void\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES\n ];\n }[\"bivarianceHack\"];\n\n /**\n * A union type of all possible shapes for React refs.\n *\n * @see {@link RefCallback}\n * @see {@link RefObject}\n */\n\n type Ref = RefCallback | RefObject | null;\n /**\n * A legacy implementation of refs where you can pass a string to a ref prop.\n *\n * @see {@link https://react.dev/reference/react/Component#refs React Docs}\n *\n * @example\n *\n * ```tsx\n *
\n * ```\n */\n // TODO: Remove the string ref special case from `PropsWithRef` once we remove LegacyRef\n type LegacyRef = string | Ref;\n\n /**\n * Retrieves the type of the 'ref' prop for a given component type or tag name.\n *\n * @template C The component type.\n *\n * @example\n *\n * ```tsx\n * type MyComponentRef = React.ElementRef;\n * ```\n *\n * @example\n *\n * ```tsx\n * type DivRef = React.ElementRef<'div'>;\n * ```\n */\n type ElementRef<\n C extends\n | ForwardRefExoticComponent\n | { new(props: any): Component }\n | ((props: any, deprecatedLegacyContext?: any) => ReactNode)\n | keyof JSX.IntrinsicElements,\n > =\n // need to check first if `ref` is a valid prop for ts@3.0\n // otherwise it will infer `{}` instead of `never`\n \"ref\" extends keyof ComponentPropsWithRef\n ? NonNullable[\"ref\"]> extends RefAttributes<\n infer Instance\n >[\"ref\"] ? Instance\n : never\n : never;\n\n type ComponentState = any;\n\n /**\n * A value which uniquely identifies a node among items in an array.\n *\n * @see {@link https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key React Docs}\n */\n type Key = string | number | bigint;\n\n /**\n * @internal The props any component can receive.\n * You don't have to add this type. All components automatically accept these props.\n * ```tsx\n * const Component = () =>
;\n * \n * ```\n *\n * WARNING: The implementation of a component will never have access to these attributes.\n * The following example would be incorrect usage because {@link Component} would never have access to `key`:\n * ```tsx\n * const Component = (props: React.Attributes) => props.key;\n * ```\n */\n interface Attributes {\n key?: Key | null | undefined;\n }\n /**\n * The props any component accepting refs can receive.\n * Class components, built-in browser components (e.g. `div`) and forwardRef components can receive refs and automatically accept these props.\n * ```tsx\n * const Component = forwardRef(() =>
);\n * console.log(current)} />\n * ```\n *\n * You only need this type if you manually author the types of props that need to be compatible with legacy refs.\n * ```tsx\n * interface Props extends React.RefAttributes {}\n * declare const Component: React.FunctionComponent;\n * ```\n *\n * Otherwise it's simpler to directly use {@link Ref} since you can safely use the\n * props type to describe to props that a consumer can pass to the component\n * as well as describing the props the implementation of a component \"sees\".\n * {@link RefAttributes} is generally not safe to describe both consumer and seen props.\n *\n * ```tsx\n * interface Props extends {\n * ref?: React.Ref | undefined;\n * }\n * declare const Component: React.FunctionComponent;\n * ```\n *\n * WARNING: The implementation of a component will not have access to the same type in versions of React supporting string refs.\n * The following example would be incorrect usage because {@link Component} would never have access to a `ref` with type `string`\n * ```tsx\n * const Component = (props: React.RefAttributes) => props.ref;\n * ```\n */\n interface RefAttributes extends Attributes {\n /**\n * Allows getting a ref to the component instance.\n * Once the component unmounts, React will set `ref.current` to `null`\n * (or call the ref with `null` if you passed a callback ref).\n *\n * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}\n */\n ref?: LegacyRef | undefined;\n }\n\n /**\n * Represents the built-in attributes available to class components.\n */\n interface ClassAttributes extends RefAttributes {\n }\n\n /**\n * Represents a JSX element.\n *\n * Where {@link ReactNode} represents everything that can be rendered, `ReactElement`\n * only represents JSX.\n *\n * @template P The type of the props object\n * @template T The type of the component or tag\n *\n * @example\n *\n * ```tsx\n * const element: ReactElement =
;\n * ```\n */\n interface ReactElement<\n P = any,\n T extends string | JSXElementConstructor = string | JSXElementConstructor,\n > {\n type: T;\n props: P;\n key: string | null;\n }\n\n /**\n * @deprecated\n */\n interface ReactComponentElement<\n T extends keyof JSX.IntrinsicElements | JSXElementConstructor,\n P = Pick, Exclude, \"key\" | \"ref\">>,\n > extends ReactElement> {}\n\n interface FunctionComponentElement

extends ReactElement> {\n ref?: (\"ref\" extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined;\n }\n\n type CElement> = ComponentElement;\n interface ComponentElement> extends ReactElement> {\n ref?: LegacyRef | undefined;\n }\n\n /**\n * @deprecated Use {@link ComponentElement} instead.\n */\n type ClassicElement

= CElement>;\n\n // string fallback for custom web-components\n interface DOMElement

| SVGAttributes, T extends Element>\n extends ReactElement\n {\n ref: LegacyRef;\n }\n\n // ReactHTML for ReactHTMLElement\n interface ReactHTMLElement extends DetailedReactHTMLElement, T> {}\n\n interface DetailedReactHTMLElement

, T extends HTMLElement> extends DOMElement {\n type: keyof ReactHTML;\n }\n\n // ReactSVG for ReactSVGElement\n interface ReactSVGElement extends DOMElement, SVGElement> {\n type: keyof ReactSVG;\n }\n\n interface ReactPortal extends ReactElement {\n children: ReactNode;\n }\n\n //\n // Factories\n // ----------------------------------------------------------------------\n\n /** @deprecated */\n type Factory

= (props?: Attributes & P, ...children: ReactNode[]) => ReactElement

;\n\n /** @deprecated */\n type SFCFactory

= FunctionComponentFactory

;\n\n /** @deprecated */\n type FunctionComponentFactory

= (\n props?: Attributes & P,\n ...children: ReactNode[]\n ) => FunctionComponentElement

;\n\n /** @deprecated */\n type ComponentFactory> = (\n props?: ClassAttributes & P,\n ...children: ReactNode[]\n ) => CElement;\n\n /** @deprecated */\n type CFactory> = ComponentFactory;\n /** @deprecated */\n type ClassicFactory

= CFactory>;\n\n /** @deprecated */\n type DOMFactory

, T extends Element> = (\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]\n ) => DOMElement;\n\n /** @deprecated */\n interface HTMLFactory extends DetailedHTMLFactory, T> {}\n\n /** @deprecated */\n interface DetailedHTMLFactory

, T extends HTMLElement> extends DOMFactory {\n (props?: ClassAttributes & P | null, ...children: ReactNode[]): DetailedReactHTMLElement;\n }\n\n /** @deprecated */\n interface SVGFactory extends DOMFactory, SVGElement> {\n (\n props?: ClassAttributes & SVGAttributes | null,\n ...children: ReactNode[]\n ): ReactSVGElement;\n }\n\n /**\n * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.\n */\n type ReactText = string | number;\n /**\n * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.\n */\n type ReactChild = ReactElement | string | number;\n\n /**\n * @deprecated Use either `ReactNode[]` if you need an array or `Iterable` if its passed to a host component.\n */\n interface ReactNodeArray extends ReadonlyArray {}\n /**\n * WARNING: Not related to `React.Fragment`.\n * @deprecated This type is not relevant when using React. Inline the type instead to make the intent clear.\n */\n type ReactFragment = Iterable;\n\n /**\n * Different release channels declare additional types of ReactNode this particular release channel accepts.\n * App or library types should never augment this interface.\n */\n interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {}\n\n /**\n * Represents all of the things React can render.\n *\n * Where {@link ReactElement} only represents JSX, `ReactNode` represents everything that can be rendered.\n *\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * // Typing children\n * type Props = { children: ReactNode }\n *\n * const Component = ({ children }: Props) =>

{children}
\n *\n * hello\n * ```\n *\n * @example\n *\n * ```tsx\n * // Typing a custom element\n * type Props = { customElement: ReactNode }\n *\n * const Component = ({ customElement }: Props) =>
{customElement}
\n *\n * hello
} />\n * ```\n */\n // non-thenables need to be kept in sync with AwaitedReactNode\n type ReactNode =\n | ReactElement\n | string\n | number\n | Iterable\n | ReactPortal\n | boolean\n | null\n | undefined\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES\n ];\n\n //\n // Top Level API\n // ----------------------------------------------------------------------\n\n // DOM Elements\n /** @deprecated */\n function createFactory(\n type: keyof ReactHTML,\n ): HTMLFactory;\n /** @deprecated */\n function createFactory(\n type: keyof ReactSVG,\n ): SVGFactory;\n /** @deprecated */\n function createFactory

, T extends Element>(\n type: string,\n ): DOMFactory;\n\n // Custom components\n /** @deprecated */\n function createFactory

(type: FunctionComponent

): FunctionComponentFactory

;\n /** @deprecated */\n function createFactory, C extends ComponentClass

>(\n type: ClassType,\n ): CFactory;\n /** @deprecated */\n function createFactory

(type: ComponentClass

): Factory

;\n\n // DOM Elements\n // TODO: generalize this to everything in `keyof ReactHTML`, not just \"input\"\n function createElement(\n type: \"input\",\n props?: InputHTMLAttributes & ClassAttributes | null,\n ...children: ReactNode[]\n ): DetailedReactHTMLElement, HTMLInputElement>;\n function createElement

, T extends HTMLElement>(\n type: keyof ReactHTML,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]\n ): DetailedReactHTMLElement;\n function createElement

, T extends SVGElement>(\n type: keyof ReactSVG,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]\n ): ReactSVGElement;\n function createElement

, T extends Element>(\n type: string,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]\n ): DOMElement;\n\n // Custom components\n\n function createElement

(\n type: FunctionComponent

,\n props?: Attributes & P | null,\n ...children: ReactNode[]\n ): FunctionComponentElement

;\n function createElement

, C extends ComponentClass

>(\n type: ClassType,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]\n ): CElement;\n function createElement

(\n type: FunctionComponent

| ComponentClass

| string,\n props?: Attributes & P | null,\n ...children: ReactNode[]\n ): ReactElement

;\n\n // DOM Elements\n // ReactHTMLElement\n function cloneElement

, T extends HTMLElement>(\n element: DetailedReactHTMLElement,\n props?: P,\n ...children: ReactNode[]\n ): DetailedReactHTMLElement;\n // ReactHTMLElement, less specific\n function cloneElement

, T extends HTMLElement>(\n element: ReactHTMLElement,\n props?: P,\n ...children: ReactNode[]\n ): ReactHTMLElement;\n // SVGElement\n function cloneElement

, T extends SVGElement>(\n element: ReactSVGElement,\n props?: P,\n ...children: ReactNode[]\n ): ReactSVGElement;\n // DOM Element (has to be the last, because type checking stops at first overload that fits)\n function cloneElement

, T extends Element>(\n element: DOMElement,\n props?: DOMAttributes & P,\n ...children: ReactNode[]\n ): DOMElement;\n\n // Custom components\n function cloneElement

(\n element: FunctionComponentElement

,\n props?: Partial

& Attributes,\n ...children: ReactNode[]\n ): FunctionComponentElement

;\n function cloneElement>(\n element: CElement,\n props?: Partial

& ClassAttributes,\n ...children: ReactNode[]\n ): CElement;\n function cloneElement

(\n element: ReactElement

,\n props?: Partial

& Attributes,\n ...children: ReactNode[]\n ): ReactElement

;\n\n /**\n * Describes the props accepted by a Context {@link Provider}.\n *\n * @template T The type of the value the context provides.\n */\n interface ProviderProps {\n value: T;\n children?: ReactNode | undefined;\n }\n\n /**\n * Describes the props accepted by a Context {@link Consumer}.\n *\n * @template T The type of the value the context provides.\n */\n interface ConsumerProps {\n children: (value: T) => ReactNode;\n }\n\n /**\n * An object masquerading as a component. These are created by functions\n * like {@link forwardRef}, {@link memo}, and {@link createContext}.\n *\n * In order to make TypeScript work, we pretend that they are normal\n * components.\n *\n * But they are, in fact, not callable - instead, they are objects which\n * are treated specially by the renderer.\n *\n * @template P The props the component accepts.\n */\n interface ExoticComponent

{\n (props: P): ReactNode;\n readonly $$typeof: symbol;\n }\n\n /**\n * An {@link ExoticComponent} with a `displayName` property applied to it.\n *\n * @template P The props the component accepts.\n */\n interface NamedExoticComponent

extends ExoticComponent

{\n /**\n * Used in debugging messages. You might want to set it\n * explicitly if you want to display a different name for\n * debugging purposes.\n *\n * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}\n */\n displayName?: string | undefined;\n }\n\n /**\n * An {@link ExoticComponent} with a `propTypes` property applied to it.\n *\n * @template P The props the component accepts.\n */\n interface ProviderExoticComponent

extends ExoticComponent

{\n propTypes?: WeakValidationMap

| undefined;\n }\n\n /**\n * Used to retrieve the type of a context object from a {@link Context}.\n *\n * @template C The context object.\n *\n * @example\n *\n * ```tsx\n * import { createContext } from 'react';\n *\n * const MyContext = createContext({ foo: 'bar' });\n *\n * type ContextType = ContextType;\n * // ContextType = { foo: string }\n * ```\n */\n type ContextType> = C extends Context ? T : never;\n\n /**\n * Wraps your components to specify the value of this context for all components inside.\n *\n * @see {@link https://react.dev/reference/react/createContext#provider React Docs}\n *\n * @example\n *\n * ```tsx\n * import { createContext } from 'react';\n *\n * const ThemeContext = createContext('light');\n *\n * function App() {\n * return (\n * \n * \n * \n * );\n * }\n * ```\n */\n type Provider = ProviderExoticComponent>;\n\n /**\n * The old way to read context, before {@link useContext} existed.\n *\n * @see {@link https://react.dev/reference/react/createContext#consumer React Docs}\n *\n * @example\n *\n * ```tsx\n * import { UserContext } from './user-context';\n *\n * function Avatar() {\n * return (\n * \n * {user => {user.name}}\n * \n * );\n * }\n * ```\n */\n type Consumer = ExoticComponent>;\n\n /**\n * Context lets components pass information deep down without explicitly\n * passing props.\n *\n * Created from {@link createContext}\n *\n * @see {@link https://react.dev/learn/passing-data-deeply-with-context React Docs}\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * import { createContext } from 'react';\n *\n * const ThemeContext = createContext('light');\n * ```\n */\n interface Context {\n Provider: Provider;\n Consumer: Consumer;\n /**\n * Used in debugging messages. You might want to set it\n * explicitly if you want to display a different name for\n * debugging purposes.\n *\n * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}\n */\n displayName?: string | undefined;\n }\n\n /**\n * Lets you create a {@link Context} that components can provide or read.\n *\n * @param defaultValue The value you want the context to have when there is no matching\n * {@link Provider} in the tree above the component reading the context. This is meant\n * as a \"last resort\" fallback.\n *\n * @see {@link https://react.dev/reference/react/createContext#reference React Docs}\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * import { createContext } from 'react';\n *\n * const ThemeContext = createContext('light');\n * ```\n */\n function createContext(\n // If you thought this should be optional, see\n // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106\n defaultValue: T,\n ): Context;\n\n function isValidElement

(object: {} | null | undefined): object is ReactElement

;\n\n /**\n * Maintainer's note: Sync with {@link ReactChildren} until {@link ReactChildren} is removed.\n */\n const Children: {\n map(\n children: C | readonly C[],\n fn: (child: C, index: number) => T,\n ): C extends null | undefined ? C : Array>;\n forEach(children: C | readonly C[], fn: (child: C, index: number) => void): void;\n count(children: any): number;\n only(children: C): C extends any[] ? never : C;\n toArray(children: ReactNode | ReactNode[]): Array>;\n };\n /**\n * Lets you group elements without a wrapper node.\n *\n * @see {@link https://react.dev/reference/react/Fragment React Docs}\n *\n * @example\n *\n * ```tsx\n * import { Fragment } from 'react';\n *\n * \n * Hello\n * World\n * \n * ```\n *\n * @example\n *\n * ```tsx\n * // Using the <> shorthand syntax:\n *\n * <>\n * Hello\n * World\n * \n * ```\n */\n const Fragment: ExoticComponent<{ children?: ReactNode | undefined }>;\n\n /**\n * Lets you find common bugs in your components early during development.\n *\n * @see {@link https://react.dev/reference/react/StrictMode React Docs}\n *\n * @example\n *\n * ```tsx\n * import { StrictMode } from 'react';\n *\n * \n * \n * \n * ```\n */\n const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>;\n\n /**\n * The props accepted by {@link Suspense}.\n *\n * @see {@link https://react.dev/reference/react/Suspense React Docs}\n */\n interface SuspenseProps {\n children?: ReactNode | undefined;\n\n /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */\n fallback?: ReactNode;\n\n /**\n * A name for this Suspense boundary for instrumentation purposes.\n * The name will help identify this boundary in React DevTools.\n */\n name?: string | undefined;\n }\n\n /**\n * Lets you display a fallback until its children have finished loading.\n *\n * @see {@link https://react.dev/reference/react/Suspense React Docs}\n *\n * @example\n *\n * ```tsx\n * import { Suspense } from 'react';\n *\n * }>\n * \n * \n * ```\n */\n const Suspense: ExoticComponent;\n const version: string;\n\n /**\n * The callback passed to {@link ProfilerProps.onRender}.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n type ProfilerOnRenderCallback = (\n /**\n * The string id prop of the {@link Profiler} tree that has just committed. This lets\n * you identify which part of the tree was committed if you are using multiple\n * profilers.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n id: string,\n /**\n * This lets you know whether the tree has just been mounted for the first time\n * or re-rendered due to a change in props, state, or hooks.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n phase: \"mount\" | \"update\" | \"nested-update\",\n /**\n * The number of milliseconds spent rendering the {@link Profiler} and its descendants\n * for the current update. This indicates how well the subtree makes use of\n * memoization (e.g. {@link memo} and {@link useMemo}). Ideally this value should decrease\n * significantly after the initial mount as many of the descendants will only need to\n * re-render if their specific props change.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n actualDuration: number,\n /**\n * The number of milliseconds estimating how much time it would take to re-render the entire\n * {@link Profiler} subtree without any optimizations. It is calculated by summing up the most\n * recent render durations of each component in the tree. This value estimates a worst-case\n * cost of rendering (e.g. the initial mount or a tree with no memoization). Compare\n * {@link actualDuration} against it to see if memoization is working.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n baseDuration: number,\n /**\n * A numeric timestamp for when React began rendering the current update.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n startTime: number,\n /**\n * A numeric timestamp for when React committed the current update. This value is shared\n * between all profilers in a commit, enabling them to be grouped if desirable.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n commitTime: number,\n ) => void;\n\n /**\n * The props accepted by {@link Profiler}.\n *\n * @see {@link https://react.dev/reference/react/Profiler React Docs}\n */\n interface ProfilerProps {\n children?: ReactNode | undefined;\n id: string;\n onRender: ProfilerOnRenderCallback;\n }\n\n /**\n * Lets you measure rendering performance of a React tree programmatically.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n *\n * @example\n *\n * ```tsx\n * \n * \n * \n * ```\n */\n const Profiler: ExoticComponent;\n\n //\n // Component API\n // ----------------------------------------------------------------------\n\n type ReactInstance = Component | Element;\n\n // Base component for plain JS classes\n interface Component

extends ComponentLifecycle {}\n class Component {\n /**\n * If set, `this.context` will be set at runtime to the current value of the given Context.\n *\n * @example\n *\n * ```ts\n * type MyContext = number\n * const Ctx = React.createContext(0)\n *\n * class Foo extends React.Component {\n * static contextType = Ctx\n * context!: React.ContextType\n * render () {\n * return <>My context's value: {this.context};\n * }\n * }\n * ```\n *\n * @see {@link https://react.dev/reference/react/Component#static-contexttype}\n */\n static contextType?: Context | undefined;\n\n /**\n * If using the new style context, re-declare this in your class to be the\n * `React.ContextType` of your `static contextType`.\n * Should be used with type annotation or static contextType.\n *\n * @example\n * ```ts\n * static contextType = MyContext\n * // For TS pre-3.7:\n * context!: React.ContextType\n * // For TS 3.7 and above:\n * declare context: React.ContextType\n * ```\n *\n * @see {@link https://react.dev/reference/react/Component#context React Docs}\n */\n context: unknown;\n\n constructor(props: P);\n /**\n * @deprecated\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html React Docs}\n */\n constructor(props: P, context: any);\n\n // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.\n // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257\n // Also, the ` | S` allows intellisense to not be dumbisense\n setState(\n state: ((prevState: Readonly, props: Readonly

) => Pick | S | null) | (Pick | S | null),\n callback?: () => void,\n ): void;\n\n forceUpdate(callback?: () => void): void;\n render(): ReactNode;\n\n readonly props: Readonly

;\n state: Readonly;\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs Legacy React Docs}\n */\n refs: {\n [key: string]: ReactInstance;\n };\n }\n\n class PureComponent

extends Component {}\n\n /**\n * @deprecated Use `ClassicComponent` from `create-react-class`\n *\n * @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs}\n * @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm}\n */\n interface ClassicComponent

extends Component {\n replaceState(nextState: S, callback?: () => void): void;\n isMounted(): boolean;\n getInitialState?(): S;\n }\n\n interface ChildContextProvider {\n getChildContext(): CC;\n }\n\n //\n // Class Interfaces\n // ----------------------------------------------------------------------\n\n /**\n * Represents the type of a function component. Can optionally\n * receive a type argument that represents the props the component\n * receives.\n *\n * @template P The props the component accepts.\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}\n * @alias for {@link FunctionComponent}\n *\n * @example\n *\n * ```tsx\n * // With props:\n * type Props = { name: string }\n *\n * const MyComponent: FC = (props) => {\n * return

{props.name}
\n * }\n * ```\n *\n * @example\n *\n * ```tsx\n * // Without props:\n * const MyComponentWithoutProps: FC = () => {\n * return
MyComponentWithoutProps
\n * }\n * ```\n */\n type FC

= FunctionComponent

;\n\n /**\n * Represents the type of a function component. Can optionally\n * receive a type argument that represents the props the component\n * accepts.\n *\n * @template P The props the component accepts.\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * // With props:\n * type Props = { name: string }\n *\n * const MyComponent: FunctionComponent = (props) => {\n * return

{props.name}
\n * }\n * ```\n *\n * @example\n *\n * ```tsx\n * // Without props:\n * const MyComponentWithoutProps: FunctionComponent = () => {\n * return
MyComponentWithoutProps
\n * }\n * ```\n */\n interface FunctionComponent

{\n (\n props: P,\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}\n */\n deprecatedLegacyContext?: any,\n ): ReactNode;\n /**\n * Used to declare the types of the props accepted by the\n * component. These types will be checked during rendering\n * and in development only.\n *\n * We recommend using TypeScript instead of checking prop\n * types at runtime.\n *\n * @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs}\n */\n propTypes?: WeakValidationMap

| undefined;\n /**\n * @deprecated\n *\n * Lets you specify which legacy context is consumed by\n * this component.\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html Legacy React Docs}\n */\n contextTypes?: ValidationMap | undefined;\n /**\n * Used to define default values for the props accepted by\n * the component.\n *\n * @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs}\n *\n * @example\n *\n * ```tsx\n * type Props = { name?: string }\n *\n * const MyComponent: FC = (props) => {\n * return

{props.name}
\n * }\n *\n * MyComponent.defaultProps = {\n * name: 'John Doe'\n * }\n * ```\n *\n * @deprecated Use {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#default_value|default values for destructuring assignments instead}.\n */\n defaultProps?: Partial

| undefined;\n /**\n * Used in debugging messages. You might want to set it\n * explicitly if you want to display a different name for\n * debugging purposes.\n *\n * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}\n *\n * @example\n *\n * ```tsx\n *\n * const MyComponent: FC = () => {\n * return

Hello!
\n * }\n *\n * MyComponent.displayName = 'MyAwesomeComponent'\n * ```\n */\n displayName?: string | undefined;\n }\n\n /**\n * @deprecated - Equivalent to {@link React.FunctionComponent}.\n *\n * @see {@link React.FunctionComponent}\n * @alias {@link VoidFunctionComponent}\n */\n type VFC

= VoidFunctionComponent

;\n\n /**\n * @deprecated - Equivalent to {@link React.FunctionComponent}.\n *\n * @see {@link React.FunctionComponent}\n */\n interface VoidFunctionComponent

{\n (\n props: P,\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}\n */\n deprecatedLegacyContext?: any,\n ): ReactNode;\n propTypes?: WeakValidationMap

| undefined;\n contextTypes?: ValidationMap | undefined;\n /**\n * @deprecated Use {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#default_value|default values for destructuring assignments instead}.\n */\n defaultProps?: Partial

| undefined;\n displayName?: string | undefined;\n }\n\n /**\n * The type of the ref received by a {@link ForwardRefRenderFunction}.\n *\n * @see {@link ForwardRefRenderFunction}\n */\n type ForwardedRef = ((instance: T | null) => void) | MutableRefObject | null;\n\n /**\n * The type of the function passed to {@link forwardRef}. This is considered different\n * to a normal {@link FunctionComponent} because it receives an additional argument,\n *\n * @param props Props passed to the component, if any.\n * @param ref A ref forwarded to the component of type {@link ForwardedRef}.\n *\n * @template T The type of the forwarded ref.\n * @template P The type of the props the component accepts.\n *\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}\n * @see {@link forwardRef}\n */\n interface ForwardRefRenderFunction {\n (props: P, ref: ForwardedRef): ReactNode;\n /**\n * Used in debugging messages. You might want to set it\n * explicitly if you want to display a different name for\n * debugging purposes.\n *\n * Will show `ForwardRef(${Component.displayName || Component.name})`\n * in devtools by default, but can be given its own specific name.\n *\n * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}\n */\n displayName?: string | undefined;\n /**\n * defaultProps are not supported on render functions passed to forwardRef.\n *\n * @see {@link https://github.com/microsoft/TypeScript/issues/36826 linked GitHub issue} for context\n * @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs}\n */\n defaultProps?: never | undefined;\n /**\n * propTypes are not supported on render functions passed to forwardRef.\n *\n * @see {@link https://github.com/microsoft/TypeScript/issues/36826 linked GitHub issue} for context\n * @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs}\n */\n propTypes?: never | undefined;\n }\n\n /**\n * Represents a component class in React.\n *\n * @template P The props the component accepts.\n * @template S The internal state of the component.\n */\n interface ComponentClass

extends StaticLifecycle {\n new(\n props: P,\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}\n */\n deprecatedLegacyContext?: any,\n ): Component;\n /**\n * Used to declare the types of the props accepted by the\n * component. These types will be checked during rendering\n * and in development only.\n *\n * We recommend using TypeScript instead of checking prop\n * types at runtime.\n *\n * @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs}\n */\n propTypes?: WeakValidationMap

| undefined;\n contextType?: Context | undefined;\n /**\n * @deprecated use {@link ComponentClass.contextType} instead\n *\n * Lets you specify which legacy context is consumed by\n * this component.\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html Legacy React Docs}\n */\n contextTypes?: ValidationMap | undefined;\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#how-to-use-context Legacy React Docs}\n */\n childContextTypes?: ValidationMap | undefined;\n /**\n * Used to define default values for the props accepted by\n * the component.\n *\n * @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs}\n */\n defaultProps?: Partial

| undefined;\n /**\n * Used in debugging messages. You might want to set it\n * explicitly if you want to display a different name for\n * debugging purposes.\n *\n * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}\n */\n displayName?: string | undefined;\n }\n\n /**\n * @deprecated Use `ClassicComponentClass` from `create-react-class`\n *\n * @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs}\n * @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm}\n */\n interface ClassicComponentClass

extends ComponentClass

{\n new(props: P, deprecatedLegacyContext?: any): ClassicComponent;\n getDefaultProps?(): P;\n }\n\n /**\n * Used in {@link createElement} and {@link createFactory} to represent\n * a class.\n *\n * An intersection type is used to infer multiple type parameters from\n * a single argument, which is useful for many top-level API defs.\n * See {@link https://github.com/Microsoft/TypeScript/issues/7234 this GitHub issue}\n * for more info.\n */\n type ClassType, C extends ComponentClass

> =\n & C\n & (new(props: P, deprecatedLegacyContext?: any) => T);\n\n //\n // Component Specs and Lifecycle\n // ----------------------------------------------------------------------\n\n // This should actually be something like `Lifecycle | DeprecatedLifecycle`,\n // as React will _not_ call the deprecated lifecycle methods if any of the new lifecycle\n // methods are present.\n interface ComponentLifecycle extends NewLifecycle, DeprecatedLifecycle {\n /**\n * Called immediately after a component is mounted. Setting state here will trigger re-rendering.\n */\n componentDidMount?(): void;\n /**\n * Called to determine whether the change in props and state should trigger a re-render.\n *\n * `Component` always returns true.\n * `PureComponent` implements a shallow comparison on props and state and returns true if any\n * props or states have changed.\n *\n * If false is returned, {@link Component.render}, `componentWillUpdate`\n * and `componentDidUpdate` will not be called.\n */\n shouldComponentUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): boolean;\n /**\n * Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as\n * cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.\n */\n componentWillUnmount?(): void;\n /**\n * Catches exceptions generated in descendant components. Unhandled exceptions will cause\n * the entire component tree to unmount.\n */\n componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;\n }\n\n // Unfortunately, we have no way of declaring that the component constructor must implement this\n interface StaticLifecycle {\n getDerivedStateFromProps?: GetDerivedStateFromProps | undefined;\n getDerivedStateFromError?: GetDerivedStateFromError | undefined;\n }\n\n type GetDerivedStateFromProps =\n /**\n * Returns an update to a component's state based on its new props and old state.\n *\n * Note: its presence prevents any of the deprecated lifecycle methods from being invoked\n */\n (nextProps: Readonly

, prevState: S) => Partial | null;\n\n type GetDerivedStateFromError =\n /**\n * This lifecycle is invoked after an error has been thrown by a descendant component.\n * It receives the error that was thrown as a parameter and should return a value to update state.\n *\n * Note: its presence prevents any of the deprecated lifecycle methods from being invoked\n */\n (error: any) => Partial | null;\n\n // This should be \"infer SS\" but can't use it yet\n interface NewLifecycle {\n /**\n * Runs before React applies the result of {@link Component.render render} to the document, and\n * returns an object to be given to {@link componentDidUpdate}. Useful for saving\n * things such as scroll position before {@link Component.render render} causes changes to it.\n *\n * Note: the presence of this method prevents any of the deprecated\n * lifecycle events from running.\n */\n getSnapshotBeforeUpdate?(prevProps: Readonly

, prevState: Readonly): SS | null;\n /**\n * Called immediately after updating occurs. Not called for the initial render.\n *\n * The snapshot is only present if {@link getSnapshotBeforeUpdate} is present and returns non-null.\n */\n componentDidUpdate?(prevProps: Readonly

, prevState: Readonly, snapshot?: SS): void;\n }\n\n interface DeprecatedLifecycle {\n /**\n * Called immediately before mounting occurs, and before {@link Component.render}.\n * Avoid introducing any side-effects or subscriptions in this method.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use {@link ComponentLifecycle.componentDidMount componentDidMount} or the constructor instead; will stop working in React 17\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n componentWillMount?(): void;\n /**\n * Called immediately before mounting occurs, and before {@link Component.render}.\n * Avoid introducing any side-effects or subscriptions in this method.\n *\n * This method will not stop working in React 17.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use {@link ComponentLifecycle.componentDidMount componentDidMount} or the constructor instead\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n UNSAFE_componentWillMount?(): void;\n /**\n * Called when the component may be receiving new props.\n * React may call this even if props have not changed, so be sure to compare new and existing\n * props if you only want to handle changes.\n *\n * Calling {@link Component.setState} generally does not trigger this method.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use static {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} instead; will stop working in React 17\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n componentWillReceiveProps?(nextProps: Readonly

, nextContext: any): void;\n /**\n * Called when the component may be receiving new props.\n * React may call this even if props have not changed, so be sure to compare new and existing\n * props if you only want to handle changes.\n *\n * Calling {@link Component.setState} generally does not trigger this method.\n *\n * This method will not stop working in React 17.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use static {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} instead\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n UNSAFE_componentWillReceiveProps?(nextProps: Readonly

, nextContext: any): void;\n /**\n * Called immediately before rendering when new props or state is received. Not called for the initial render.\n *\n * Note: You cannot call {@link Component.setState} here.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n componentWillUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): void;\n /**\n * Called immediately before rendering when new props or state is received. Not called for the initial render.\n *\n * Note: You cannot call {@link Component.setState} here.\n *\n * This method will not stop working in React 17.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use getSnapshotBeforeUpdate instead\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n UNSAFE_componentWillUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): void;\n }\n\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html Mixins Considered Harmful}\n */\n interface Mixin extends ComponentLifecycle {\n mixins?: Array> | undefined;\n statics?: {\n [key: string]: any;\n } | undefined;\n\n displayName?: string | undefined;\n propTypes?: ValidationMap | undefined;\n contextTypes?: ValidationMap | undefined;\n childContextTypes?: ValidationMap | undefined;\n\n getDefaultProps?(): P;\n getInitialState?(): S;\n }\n\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html Mixins Considered Harmful}\n */\n interface ComponentSpec extends Mixin {\n render(): ReactNode;\n\n [propertyName: string]: any;\n }\n\n function createRef(): RefObject;\n\n /**\n * The type of the component returned from {@link forwardRef}.\n *\n * @template P The props the component accepts, if any.\n *\n * @see {@link ExoticComponent}\n */\n interface ForwardRefExoticComponent

extends NamedExoticComponent

{\n /**\n * @deprecated Use {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#default_value|default values for destructuring assignments instead}.\n */\n defaultProps?: Partial

| undefined;\n propTypes?: WeakValidationMap

| undefined;\n }\n\n /**\n * Lets your component expose a DOM node to a parent component\n * using a ref.\n *\n * @see {@link https://react.dev/reference/react/forwardRef React Docs}\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}\n *\n * @param render See the {@link ForwardRefRenderFunction}.\n *\n * @template T The type of the DOM node.\n * @template P The props the component accepts, if any.\n *\n * @example\n *\n * ```tsx\n * interface Props {\n * children?: ReactNode;\n * type: \"submit\" | \"button\";\n * }\n *\n * export const FancyButton = forwardRef((props, ref) => (\n * \n * ));\n * ```\n */\n function forwardRef(\n render: ForwardRefRenderFunction>,\n ): ForwardRefExoticComponent & RefAttributes>;\n\n /**\n * Omits the 'ref' attribute from the given props object.\n *\n * @template P The props object type.\n */\n type PropsWithoutRef

=\n // Omit would not be sufficient for this. We'd like to avoid unnecessary mapping and need a distributive conditional to support unions.\n // see: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types\n // https://github.com/Microsoft/TypeScript/issues/28339\n P extends any ? (\"ref\" extends keyof P ? Omit : P) : P;\n /** Ensures that the props do not include string ref, which cannot be forwarded */\n type PropsWithRef

=\n // Note: String refs can be forwarded. We can't fix this bug without breaking a bunch of libraries now though.\n // Just \"P extends { ref?: infer R }\" looks sufficient, but R will infer as {} if P is {}.\n \"ref\" extends keyof P\n ? P extends { ref?: infer R | undefined }\n ? string extends R ? PropsWithoutRef

& { ref?: Exclude | undefined }\n : P\n : P\n : P;\n\n type PropsWithChildren

= P & { children?: ReactNode | undefined };\n\n /**\n * Used to retrieve the props a component accepts. Can either be passed a string,\n * indicating a DOM element (e.g. 'div', 'span', etc.) or the type of a React\n * component.\n *\n * It's usually better to use {@link ComponentPropsWithRef} or {@link ComponentPropsWithoutRef}\n * instead of this type, as they let you be explicit about whether or not to include\n * the `ref` prop.\n *\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * // Retrieves the props an 'input' element accepts\n * type InputProps = React.ComponentProps<'input'>;\n * ```\n *\n * @example\n *\n * ```tsx\n * const MyComponent = (props: { foo: number, bar: string }) =>

;\n *\n * // Retrieves the props 'MyComponent' accepts\n * type MyComponentProps = React.ComponentProps;\n * ```\n */\n type ComponentProps> = T extends\n JSXElementConstructor ? P\n : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T]\n : {};\n\n /**\n * Used to retrieve the props a component accepts with its ref. Can either be\n * passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the\n * type of a React component.\n *\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * // Retrieves the props an 'input' element accepts\n * type InputProps = React.ComponentPropsWithRef<'input'>;\n * ```\n *\n * @example\n *\n * ```tsx\n * const MyComponent = (props: { foo: number, bar: string }) =>
;\n *\n * // Retrieves the props 'MyComponent' accepts\n * type MyComponentPropsWithRef = React.ComponentPropsWithRef;\n * ```\n */\n type ComponentPropsWithRef = T extends (new(props: infer P) => Component)\n ? PropsWithoutRef

& RefAttributes>\n : PropsWithRef>;\n /**\n * Used to retrieve the props a custom component accepts with its ref.\n *\n * Unlike {@link ComponentPropsWithRef}, this only works with custom\n * components, i.e. components you define yourself. This is to improve\n * type-checking performance.\n *\n * @example\n *\n * ```tsx\n * const MyComponent = (props: { foo: number, bar: string }) =>

;\n *\n * // Retrieves the props 'MyComponent' accepts\n * type MyComponentPropsWithRef = React.CustomComponentPropsWithRef;\n * ```\n */\n type CustomComponentPropsWithRef = T extends (new(props: infer P) => Component)\n ? (PropsWithoutRef

& RefAttributes>)\n : T extends ((props: infer P, legacyContext?: any) => ReactNode) ? PropsWithRef

\n : never;\n\n /**\n * Used to retrieve the props a component accepts without its ref. Can either be\n * passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the\n * type of a React component.\n *\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * // Retrieves the props an 'input' element accepts\n * type InputProps = React.ComponentPropsWithoutRef<'input'>;\n * ```\n *\n * @example\n *\n * ```tsx\n * const MyComponent = (props: { foo: number, bar: string }) =>

;\n *\n * // Retrieves the props 'MyComponent' accepts\n * type MyComponentPropsWithoutRef = React.ComponentPropsWithoutRef;\n * ```\n */\n type ComponentPropsWithoutRef = PropsWithoutRef>;\n\n type ComponentRef = T extends NamedExoticComponent<\n ComponentPropsWithoutRef & RefAttributes\n > ? Method\n : ComponentPropsWithRef extends RefAttributes ? Method\n : never;\n\n // will show `Memo(${Component.displayName || Component.name})` in devtools by default,\n // but can be given its own specific name\n type MemoExoticComponent> = NamedExoticComponent> & {\n readonly type: T;\n };\n\n /**\n * Lets you skip re-rendering a component when its props are unchanged.\n *\n * @see {@link https://react.dev/reference/react/memo React Docs}\n *\n * @param Component The component to memoize.\n * @param propsAreEqual A function that will be used to determine if the props have changed.\n *\n * @example\n *\n * ```tsx\n * import { memo } from 'react';\n *\n * const SomeComponent = memo(function SomeComponent(props: { foo: string }) {\n * // ...\n * });\n * ```\n */\n function memo

(\n Component: FunctionComponent

,\n propsAreEqual?: (prevProps: Readonly

, nextProps: Readonly

) => boolean,\n ): NamedExoticComponent

;\n function memo>(\n Component: T,\n propsAreEqual?: (prevProps: Readonly>, nextProps: Readonly>) => boolean,\n ): MemoExoticComponent;\n\n interface LazyExoticComponent>\n extends ExoticComponent>\n {\n readonly _result: T;\n }\n\n /**\n * Lets you defer loading a component’s code until it is rendered for the first time.\n *\n * @see {@link https://react.dev/reference/react/lazy React Docs}\n *\n * @param load A function that returns a `Promise` or another thenable (a `Promise`-like object with a\n * then method). React will not call `load` until the first time you attempt to render the returned\n * component. After React first calls load, it will wait for it to resolve, and then render the\n * resolved value’s `.default` as a React component. Both the returned `Promise` and the `Promise`’s\n * resolved value will be cached, so React will not call load more than once. If the `Promise` rejects,\n * React will throw the rejection reason for the nearest Error Boundary to handle.\n *\n * @example\n *\n * ```tsx\n * import { lazy } from 'react';\n *\n * const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));\n * ```\n */\n function lazy>(\n load: () => Promise<{ default: T }>,\n ): LazyExoticComponent;\n\n //\n // React Hooks\n // ----------------------------------------------------------------------\n\n /**\n * The instruction passed to a {@link Dispatch} function in {@link useState}\n * to tell React what the next value of the {@link useState} should be.\n *\n * Often found wrapped in {@link Dispatch}.\n *\n * @template S The type of the state.\n *\n * @example\n *\n * ```tsx\n * // This return type correctly represents the type of\n * // `setCount` in the example below.\n * const useCustomState = (): Dispatch> => {\n * const [count, setCount] = useState(0);\n *\n * return setCount;\n * }\n * ```\n */\n type SetStateAction = S | ((prevState: S) => S);\n\n /**\n * A function that can be used to update the state of a {@link useState}\n * or {@link useReducer} hook.\n */\n type Dispatch = (value: A) => void;\n /**\n * A {@link Dispatch} function can sometimes be called without any arguments.\n */\n type DispatchWithoutAction = () => void;\n // Unlike redux, the actions _can_ be anything\n type Reducer = (prevState: S, action: A) => S;\n // If useReducer accepts a reducer without action, dispatch may be called without any parameters.\n type ReducerWithoutAction = (prevState: S) => S;\n // types used to try and prevent the compiler from reducing S\n // to a supertype common with the second argument to useReducer()\n type ReducerState> = R extends Reducer ? S : never;\n type ReducerAction> = R extends Reducer ? A : never;\n // The identity check is done with the SameValue algorithm (Object.is), which is stricter than ===\n type ReducerStateWithoutAction> = R extends ReducerWithoutAction ? S\n : never;\n type DependencyList = readonly unknown[];\n\n // NOTE: callbacks are _only_ allowed to return either void, or a destructor.\n type EffectCallback = () => void | Destructor;\n\n interface MutableRefObject {\n current: T;\n }\n\n // This will technically work if you give a Consumer or Provider but it's deprecated and warns\n /**\n * Accepts a context object (the value returned from `React.createContext`) and returns the current\n * context value, as given by the nearest context provider for the given context.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useContext}\n */\n function useContext(context: Context /*, (not public API) observedBits?: number|boolean */): T;\n /**\n * Returns a stateful value, and a function to update it.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useState}\n */\n function useState(initialState: S | (() => S)): [S, Dispatch>];\n // convenience overload when first argument is omitted\n /**\n * Returns a stateful value, and a function to update it.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useState}\n */\n function useState(): [S | undefined, Dispatch>];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useReducer}\n */\n // overload where dispatch could accept 0 arguments.\n function useReducer, I>(\n reducer: R,\n initializerArg: I,\n initializer: (arg: I) => ReducerStateWithoutAction,\n ): [ReducerStateWithoutAction, DispatchWithoutAction];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useReducer}\n */\n // overload where dispatch could accept 0 arguments.\n function useReducer>(\n reducer: R,\n initializerArg: ReducerStateWithoutAction,\n initializer?: undefined,\n ): [ReducerStateWithoutAction, DispatchWithoutAction];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useReducer}\n */\n // overload where \"I\" may be a subset of ReducerState; used to provide autocompletion.\n // If \"I\" matches ReducerState exactly then the last overload will allow initializer to be omitted.\n // the last overload effectively behaves as if the identity function (x => x) is the initializer.\n function useReducer, I>(\n reducer: R,\n initializerArg: I & ReducerState,\n initializer: (arg: I & ReducerState) => ReducerState,\n ): [ReducerState, Dispatch>];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useReducer}\n */\n // overload for free \"I\"; all goes as long as initializer converts it into \"ReducerState\".\n function useReducer, I>(\n reducer: R,\n initializerArg: I,\n initializer: (arg: I) => ReducerState,\n ): [ReducerState, Dispatch>];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useReducer}\n */\n\n // I'm not sure if I keep this 2-ary or if I make it (2,3)-ary; it's currently (2,3)-ary.\n // The Flow types do have an overload for 3-ary invocation with undefined initializer.\n\n // NOTE: without the ReducerState indirection, TypeScript would reduce S to be the most common\n // supertype between the reducer's return type and the initialState (or the initializer's return type),\n // which would prevent autocompletion from ever working.\n\n // TODO: double-check if this weird overload logic is necessary. It is possible it's either a bug\n // in older versions, or a regression in newer versions of the typescript completion service.\n function useReducer>(\n reducer: R,\n initialState: ReducerState,\n initializer?: undefined,\n ): [ReducerState, Dispatch>];\n /**\n * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument\n * (`initialValue`). The returned object will persist for the full lifetime of the component.\n *\n * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable\n * value around similar to how you’d use instance fields in classes.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useRef}\n */\n function useRef(initialValue: T): MutableRefObject;\n // convenience overload for refs given as a ref prop as they typically start with a null value\n /**\n * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument\n * (`initialValue`). The returned object will persist for the full lifetime of the component.\n *\n * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable\n * value around similar to how you’d use instance fields in classes.\n *\n * Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type\n * of the generic argument.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useRef}\n */\n function useRef(initialValue: T | null): RefObject;\n // convenience overload for potentially undefined initialValue / call with 0 arguments\n // has a default to stop it from defaulting to {} instead\n /**\n * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument\n * (`initialValue`). The returned object will persist for the full lifetime of the component.\n *\n * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable\n * value around similar to how you’d use instance fields in classes.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useRef}\n */\n function useRef(initialValue?: undefined): MutableRefObject;\n /**\n * The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations.\n * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside\n * `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.\n *\n * Prefer the standard `useEffect` when possible to avoid blocking visual updates.\n *\n * If you’re migrating code from a class component, `useLayoutEffect` fires in the same phase as\n * `componentDidMount` and `componentDidUpdate`.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useLayoutEffect}\n */\n function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;\n /**\n * Accepts a function that contains imperative, possibly effectful code.\n *\n * @param effect Imperative function that can return a cleanup function\n * @param deps If present, effect will only activate if the values in the list change.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useEffect}\n */\n function useEffect(effect: EffectCallback, deps?: DependencyList): void;\n // NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref\n /**\n * `useImperativeHandle` customizes the instance value that is exposed to parent components when using\n * `ref`. As always, imperative code using refs should be avoided in most cases.\n *\n * `useImperativeHandle` should be used with `React.forwardRef`.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useImperativeHandle}\n */\n function useImperativeHandle(ref: Ref | undefined, init: () => R, deps?: DependencyList): void;\n // I made 'inputs' required here and in useMemo as there's no point to memoizing without the memoization key\n // useCallback(X) is identical to just using X, useMemo(() => Y) is identical to just using Y.\n /**\n * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs`\n * has changed.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useCallback}\n */\n // A specific function type would not trigger implicit any.\n // See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/52873#issuecomment-845806435 for a comparison between `Function` and more specific types.\n // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n function useCallback(callback: T, deps: DependencyList): T;\n /**\n * `useMemo` will only recompute the memoized value when one of the `deps` has changed.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useMemo}\n */\n // allow undefined, but don't make it optional as that is very likely a mistake\n function useMemo(factory: () => T, deps: DependencyList): T;\n /**\n * `useDebugValue` can be used to display a label for custom hooks in React DevTools.\n *\n * NOTE: We don’t recommend adding debug values to every custom hook.\n * It’s most valuable for custom hooks that are part of shared libraries.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useDebugValue}\n */\n // the name of the custom hook is itself derived from the function name at runtime:\n // it's just the function name without the \"use\" prefix.\n function useDebugValue(value: T, format?: (value: T) => any): void;\n\n // must be synchronous\n export type TransitionFunction = () => VoidOrUndefinedOnly;\n // strange definition to allow vscode to show documentation on the invocation\n export interface TransitionStartFunction {\n /**\n * State updates caused inside the callback are allowed to be deferred.\n *\n * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**\n *\n * @param callback A _synchronous_ function which causes state updates that can be deferred.\n */\n (callback: TransitionFunction): void;\n }\n\n /**\n * Returns a deferred version of the value that may “lag behind” it.\n *\n * This is commonly used to keep the interface responsive when you have something that renders immediately\n * based on user input and something that needs to wait for a data fetch.\n *\n * A good example of this is a text input.\n *\n * @param value The value that is going to be deferred\n *\n * @see {@link https://react.dev/reference/react/useDeferredValue}\n */\n export function useDeferredValue(value: T): T;\n\n /**\n * Allows components to avoid undesirable loading states by waiting for content to load\n * before transitioning to the next screen. It also allows components to defer slower,\n * data fetching updates until subsequent renders so that more crucial updates can be\n * rendered immediately.\n *\n * The `useTransition` hook returns two values in an array.\n *\n * The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish.\n * The second is a function that takes a callback. We can use it to tell React which state we want to defer.\n *\n * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**\n *\n * @see {@link https://react.dev/reference/react/useTransition}\n */\n export function useTransition(): [boolean, TransitionStartFunction];\n\n /**\n * Similar to `useTransition` but allows uses where hooks are not available.\n *\n * @param callback A _synchronous_ function which causes state updates that can be deferred.\n */\n export function startTransition(scope: TransitionFunction): void;\n\n /**\n * Wrap any code rendering and triggering updates to your components into `act()` calls.\n *\n * Ensures that the behavior in your tests matches what happens in the browser\n * more closely by executing pending `useEffect`s before returning. This also\n * reduces the amount of re-renders done.\n *\n * @param callback A synchronous, void callback that will execute as a single, complete React commit.\n *\n * @see https://reactjs.org/blog/2019/02/06/react-v16.8.0.html#testing-hooks\n */\n // While act does always return Thenable, if a void function is passed, we pretend the return value is also void to not trigger dangling Promise lint rules.\n export function act(callback: () => VoidOrUndefinedOnly): void;\n export function act(callback: () => T | Promise): Promise;\n\n export function useId(): string;\n\n /**\n * @param effect Imperative function that can return a cleanup function\n * @param deps If present, effect will only activate if the values in the list change.\n *\n * @see {@link https://github.com/facebook/react/pull/21913}\n */\n export function useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void;\n\n /**\n * @param subscribe\n * @param getSnapshot\n *\n * @see {@link https://github.com/reactwg/react-18/discussions/86}\n */\n // keep in sync with `useSyncExternalStore` from `use-sync-external-store`\n export function useSyncExternalStore(\n subscribe: (onStoreChange: () => void) => () => void,\n getSnapshot: () => Snapshot,\n getServerSnapshot?: () => Snapshot,\n ): Snapshot;\n\n //\n // Event System\n // ----------------------------------------------------------------------\n // TODO: change any to unknown when moving to TS v3\n interface BaseSyntheticEvent {\n nativeEvent: E;\n currentTarget: C;\n target: T;\n bubbles: boolean;\n cancelable: boolean;\n defaultPrevented: boolean;\n eventPhase: number;\n isTrusted: boolean;\n preventDefault(): void;\n isDefaultPrevented(): boolean;\n stopPropagation(): void;\n isPropagationStopped(): boolean;\n persist(): void;\n timeStamp: number;\n type: string;\n }\n\n /**\n * currentTarget - a reference to the element on which the event listener is registered.\n *\n * target - a reference to the element from which the event was originally dispatched.\n * This might be a child element to the element on which the event listener is registered.\n * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682\n */\n interface SyntheticEvent extends BaseSyntheticEvent {}\n\n interface ClipboardEvent extends SyntheticEvent {\n clipboardData: DataTransfer;\n }\n\n interface CompositionEvent extends SyntheticEvent {\n data: string;\n }\n\n interface DragEvent extends MouseEvent {\n dataTransfer: DataTransfer;\n }\n\n interface PointerEvent extends MouseEvent {\n pointerId: number;\n pressure: number;\n tangentialPressure: number;\n tiltX: number;\n tiltY: number;\n twist: number;\n width: number;\n height: number;\n pointerType: \"mouse\" | \"pen\" | \"touch\";\n isPrimary: boolean;\n }\n\n interface FocusEvent extends SyntheticEvent {\n relatedTarget: (EventTarget & RelatedTarget) | null;\n target: EventTarget & Target;\n }\n\n interface FormEvent extends SyntheticEvent {\n }\n\n interface InvalidEvent extends SyntheticEvent {\n target: EventTarget & T;\n }\n\n interface ChangeEvent extends SyntheticEvent {\n target: EventTarget & T;\n }\n\n interface InputEvent extends SyntheticEvent {\n data: string;\n }\n\n export type ModifierKey =\n | \"Alt\"\n | \"AltGraph\"\n | \"CapsLock\"\n | \"Control\"\n | \"Fn\"\n | \"FnLock\"\n | \"Hyper\"\n | \"Meta\"\n | \"NumLock\"\n | \"ScrollLock\"\n | \"Shift\"\n | \"Super\"\n | \"Symbol\"\n | \"SymbolLock\";\n\n interface KeyboardEvent extends UIEvent {\n altKey: boolean;\n /** @deprecated */\n charCode: number;\n ctrlKey: boolean;\n code: string;\n /**\n * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.\n */\n getModifierState(key: ModifierKey): boolean;\n /**\n * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values\n */\n key: string;\n /** @deprecated */\n keyCode: number;\n locale: string;\n location: number;\n metaKey: boolean;\n repeat: boolean;\n shiftKey: boolean;\n /** @deprecated */\n which: number;\n }\n\n interface MouseEvent extends UIEvent {\n altKey: boolean;\n button: number;\n buttons: number;\n clientX: number;\n clientY: number;\n ctrlKey: boolean;\n /**\n * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.\n */\n getModifierState(key: ModifierKey): boolean;\n metaKey: boolean;\n movementX: number;\n movementY: number;\n pageX: number;\n pageY: number;\n relatedTarget: EventTarget | null;\n screenX: number;\n screenY: number;\n shiftKey: boolean;\n }\n\n interface TouchEvent extends UIEvent {\n altKey: boolean;\n changedTouches: TouchList;\n ctrlKey: boolean;\n /**\n * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.\n */\n getModifierState(key: ModifierKey): boolean;\n metaKey: boolean;\n shiftKey: boolean;\n targetTouches: TouchList;\n touches: TouchList;\n }\n\n interface UIEvent extends SyntheticEvent {\n detail: number;\n view: AbstractView;\n }\n\n interface WheelEvent extends MouseEvent {\n deltaMode: number;\n deltaX: number;\n deltaY: number;\n deltaZ: number;\n }\n\n interface AnimationEvent extends SyntheticEvent {\n animationName: string;\n elapsedTime: number;\n pseudoElement: string;\n }\n\n interface TransitionEvent extends SyntheticEvent {\n elapsedTime: number;\n propertyName: string;\n pseudoElement: string;\n }\n\n //\n // Event Handler Types\n // ----------------------------------------------------------------------\n\n type EventHandler> = { bivarianceHack(event: E): void }[\"bivarianceHack\"];\n\n type ReactEventHandler = EventHandler>;\n\n type ClipboardEventHandler = EventHandler>;\n type CompositionEventHandler = EventHandler>;\n type DragEventHandler = EventHandler>;\n type FocusEventHandler = EventHandler>;\n type FormEventHandler = EventHandler>;\n type ChangeEventHandler = EventHandler>;\n type InputEventHandler = EventHandler>;\n type KeyboardEventHandler = EventHandler>;\n type MouseEventHandler = EventHandler>;\n type TouchEventHandler = EventHandler>;\n type PointerEventHandler = EventHandler>;\n type UIEventHandler = EventHandler>;\n type WheelEventHandler = EventHandler>;\n type AnimationEventHandler = EventHandler>;\n type TransitionEventHandler = EventHandler>;\n\n //\n // Props / DOM Attributes\n // ----------------------------------------------------------------------\n\n interface HTMLProps extends AllHTMLAttributes, ClassAttributes {\n }\n\n type DetailedHTMLProps, T> = ClassAttributes & E;\n\n interface SVGProps extends SVGAttributes, ClassAttributes {\n }\n\n interface SVGLineElementAttributes extends SVGProps {}\n interface SVGTextElementAttributes extends SVGProps {}\n\n interface DOMAttributes {\n children?: ReactNode | undefined;\n dangerouslySetInnerHTML?: {\n // Should be InnerHTML['innerHTML'].\n // But unfortunately we're mixing renderer-specific type declarations.\n __html: string | TrustedHTML;\n } | undefined;\n\n // Clipboard Events\n onCopy?: ClipboardEventHandler | undefined;\n onCopyCapture?: ClipboardEventHandler | undefined;\n onCut?: ClipboardEventHandler | undefined;\n onCutCapture?: ClipboardEventHandler | undefined;\n onPaste?: ClipboardEventHandler | undefined;\n onPasteCapture?: ClipboardEventHandler | undefined;\n\n // Composition Events\n onCompositionEnd?: CompositionEventHandler | undefined;\n onCompositionEndCapture?: CompositionEventHandler | undefined;\n onCompositionStart?: CompositionEventHandler | undefined;\n onCompositionStartCapture?: CompositionEventHandler | undefined;\n onCompositionUpdate?: CompositionEventHandler | undefined;\n onCompositionUpdateCapture?: CompositionEventHandler | undefined;\n\n // Focus Events\n onFocus?: FocusEventHandler | undefined;\n onFocusCapture?: FocusEventHandler | undefined;\n onBlur?: FocusEventHandler | undefined;\n onBlurCapture?: FocusEventHandler | undefined;\n\n // Form Events\n onChange?: FormEventHandler | undefined;\n onChangeCapture?: FormEventHandler | undefined;\n onBeforeInput?: InputEventHandler | undefined;\n onBeforeInputCapture?: FormEventHandler | undefined;\n onInput?: FormEventHandler | undefined;\n onInputCapture?: FormEventHandler | undefined;\n onReset?: FormEventHandler | undefined;\n onResetCapture?: FormEventHandler | undefined;\n onSubmit?: FormEventHandler | undefined;\n onSubmitCapture?: FormEventHandler | undefined;\n onInvalid?: FormEventHandler | undefined;\n onInvalidCapture?: FormEventHandler | undefined;\n\n // Image Events\n onLoad?: ReactEventHandler | undefined;\n onLoadCapture?: ReactEventHandler | undefined;\n onError?: ReactEventHandler | undefined; // also a Media Event\n onErrorCapture?: ReactEventHandler | undefined; // also a Media Event\n\n // Keyboard Events\n onKeyDown?: KeyboardEventHandler | undefined;\n onKeyDownCapture?: KeyboardEventHandler | undefined;\n /** @deprecated Use `onKeyUp` or `onKeyDown` instead */\n onKeyPress?: KeyboardEventHandler | undefined;\n /** @deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead */\n onKeyPressCapture?: KeyboardEventHandler | undefined;\n onKeyUp?: KeyboardEventHandler | undefined;\n onKeyUpCapture?: KeyboardEventHandler | undefined;\n\n // Media Events\n onAbort?: ReactEventHandler | undefined;\n onAbortCapture?: ReactEventHandler | undefined;\n onCanPlay?: ReactEventHandler | undefined;\n onCanPlayCapture?: ReactEventHandler | undefined;\n onCanPlayThrough?: ReactEventHandler | undefined;\n onCanPlayThroughCapture?: ReactEventHandler | undefined;\n onDurationChange?: ReactEventHandler | undefined;\n onDurationChangeCapture?: ReactEventHandler | undefined;\n onEmptied?: ReactEventHandler | undefined;\n onEmptiedCapture?: ReactEventHandler | undefined;\n onEncrypted?: ReactEventHandler | undefined;\n onEncryptedCapture?: ReactEventHandler | undefined;\n onEnded?: ReactEventHandler | undefined;\n onEndedCapture?: ReactEventHandler | undefined;\n onLoadedData?: ReactEventHandler | undefined;\n onLoadedDataCapture?: ReactEventHandler | undefined;\n onLoadedMetadata?: ReactEventHandler | undefined;\n onLoadedMetadataCapture?: ReactEventHandler | undefined;\n onLoadStart?: ReactEventHandler | undefined;\n onLoadStartCapture?: ReactEventHandler | undefined;\n onPause?: ReactEventHandler | undefined;\n onPauseCapture?: ReactEventHandler | undefined;\n onPlay?: ReactEventHandler | undefined;\n onPlayCapture?: ReactEventHandler | undefined;\n onPlaying?: ReactEventHandler | undefined;\n onPlayingCapture?: ReactEventHandler | undefined;\n onProgress?: ReactEventHandler | undefined;\n onProgressCapture?: ReactEventHandler | undefined;\n onRateChange?: ReactEventHandler | undefined;\n onRateChangeCapture?: ReactEventHandler | undefined;\n onSeeked?: ReactEventHandler | undefined;\n onSeekedCapture?: ReactEventHandler | undefined;\n onSeeking?: ReactEventHandler | undefined;\n onSeekingCapture?: ReactEventHandler | undefined;\n onStalled?: ReactEventHandler | undefined;\n onStalledCapture?: ReactEventHandler | undefined;\n onSuspend?: ReactEventHandler | undefined;\n onSuspendCapture?: ReactEventHandler | undefined;\n onTimeUpdate?: ReactEventHandler | undefined;\n onTimeUpdateCapture?: ReactEventHandler | undefined;\n onVolumeChange?: ReactEventHandler | undefined;\n onVolumeChangeCapture?: ReactEventHandler | undefined;\n onWaiting?: ReactEventHandler | undefined;\n onWaitingCapture?: ReactEventHandler | undefined;\n\n // MouseEvents\n onAuxClick?: MouseEventHandler | undefined;\n onAuxClickCapture?: MouseEventHandler | undefined;\n onClick?: MouseEventHandler | undefined;\n onClickCapture?: MouseEventHandler | undefined;\n onContextMenu?: MouseEventHandler | undefined;\n onContextMenuCapture?: MouseEventHandler | undefined;\n onDoubleClick?: MouseEventHandler | undefined;\n onDoubleClickCapture?: MouseEventHandler | undefined;\n onDrag?: DragEventHandler | undefined;\n onDragCapture?: DragEventHandler | undefined;\n onDragEnd?: DragEventHandler | undefined;\n onDragEndCapture?: DragEventHandler | undefined;\n onDragEnter?: DragEventHandler | undefined;\n onDragEnterCapture?: DragEventHandler | undefined;\n onDragExit?: DragEventHandler | undefined;\n onDragExitCapture?: DragEventHandler | undefined;\n onDragLeave?: DragEventHandler | undefined;\n onDragLeaveCapture?: DragEventHandler | undefined;\n onDragOver?: DragEventHandler | undefined;\n onDragOverCapture?: DragEventHandler | undefined;\n onDragStart?: DragEventHandler | undefined;\n onDragStartCapture?: DragEventHandler | undefined;\n onDrop?: DragEventHandler | undefined;\n onDropCapture?: DragEventHandler | undefined;\n onMouseDown?: MouseEventHandler | undefined;\n onMouseDownCapture?: MouseEventHandler | undefined;\n onMouseEnter?: MouseEventHandler | undefined;\n onMouseLeave?: MouseEventHandler | undefined;\n onMouseMove?: MouseEventHandler | undefined;\n onMouseMoveCapture?: MouseEventHandler | undefined;\n onMouseOut?: MouseEventHandler | undefined;\n onMouseOutCapture?: MouseEventHandler | undefined;\n onMouseOver?: MouseEventHandler | undefined;\n onMouseOverCapture?: MouseEventHandler | undefined;\n onMouseUp?: MouseEventHandler | undefined;\n onMouseUpCapture?: MouseEventHandler | undefined;\n\n // Selection Events\n onSelect?: ReactEventHandler | undefined;\n onSelectCapture?: ReactEventHandler | undefined;\n\n // Touch Events\n onTouchCancel?: TouchEventHandler | undefined;\n onTouchCancelCapture?: TouchEventHandler | undefined;\n onTouchEnd?: TouchEventHandler | undefined;\n onTouchEndCapture?: TouchEventHandler | undefined;\n onTouchMove?: TouchEventHandler | undefined;\n onTouchMoveCapture?: TouchEventHandler | undefined;\n onTouchStart?: TouchEventHandler | undefined;\n onTouchStartCapture?: TouchEventHandler | undefined;\n\n // Pointer Events\n onPointerDown?: PointerEventHandler | undefined;\n onPointerDownCapture?: PointerEventHandler | undefined;\n onPointerMove?: PointerEventHandler | undefined;\n onPointerMoveCapture?: PointerEventHandler | undefined;\n onPointerUp?: PointerEventHandler | undefined;\n onPointerUpCapture?: PointerEventHandler | undefined;\n onPointerCancel?: PointerEventHandler | undefined;\n onPointerCancelCapture?: PointerEventHandler | undefined;\n onPointerEnter?: PointerEventHandler | undefined;\n onPointerLeave?: PointerEventHandler | undefined;\n onPointerOver?: PointerEventHandler | undefined;\n onPointerOverCapture?: PointerEventHandler | undefined;\n onPointerOut?: PointerEventHandler | undefined;\n onPointerOutCapture?: PointerEventHandler | undefined;\n onGotPointerCapture?: PointerEventHandler | undefined;\n onGotPointerCaptureCapture?: PointerEventHandler | undefined;\n onLostPointerCapture?: PointerEventHandler | undefined;\n onLostPointerCaptureCapture?: PointerEventHandler | undefined;\n\n // UI Events\n onScroll?: UIEventHandler | undefined;\n onScrollCapture?: UIEventHandler | undefined;\n\n // Wheel Events\n onWheel?: WheelEventHandler | undefined;\n onWheelCapture?: WheelEventHandler | undefined;\n\n // Animation Events\n onAnimationStart?: AnimationEventHandler | undefined;\n onAnimationStartCapture?: AnimationEventHandler | undefined;\n onAnimationEnd?: AnimationEventHandler | undefined;\n onAnimationEndCapture?: AnimationEventHandler | undefined;\n onAnimationIteration?: AnimationEventHandler | undefined;\n onAnimationIterationCapture?: AnimationEventHandler | undefined;\n\n // Transition Events\n onTransitionEnd?: TransitionEventHandler | undefined;\n onTransitionEndCapture?: TransitionEventHandler | undefined;\n }\n\n export interface CSSProperties extends CSS.Properties {\n /**\n * The index signature was removed to enable closed typing for style\n * using CSSType. You're able to use type assertion or module augmentation\n * to add properties or an index signature of your own.\n *\n * For examples and more information, visit:\n * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors\n */\n }\n\n // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/\n interface AriaAttributes {\n /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */\n \"aria-activedescendant\"?: string | undefined;\n /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */\n \"aria-atomic\"?: Booleanish | undefined;\n /**\n * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\n * presented if they are made.\n */\n \"aria-autocomplete\"?: \"none\" | \"inline\" | \"list\" | \"both\" | undefined;\n /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */\n /**\n * Defines a string value that labels the current element, which is intended to be converted into Braille.\n * @see aria-label.\n */\n \"aria-braillelabel\"?: string | undefined;\n /**\n * Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n * @see aria-roledescription.\n */\n \"aria-brailleroledescription\"?: string | undefined;\n \"aria-busy\"?: Booleanish | undefined;\n /**\n * Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n * @see aria-pressed @see aria-selected.\n */\n \"aria-checked\"?: boolean | \"false\" | \"mixed\" | \"true\" | undefined;\n /**\n * Defines the total number of columns in a table, grid, or treegrid.\n * @see aria-colindex.\n */\n \"aria-colcount\"?: number | undefined;\n /**\n * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n * @see aria-colcount @see aria-colspan.\n */\n \"aria-colindex\"?: number | undefined;\n /**\n * Defines a human readable text alternative of aria-colindex.\n * @see aria-rowindextext.\n */\n \"aria-colindextext\"?: string | undefined;\n /**\n * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n * @see aria-colindex @see aria-rowspan.\n */\n \"aria-colspan\"?: number | undefined;\n /**\n * Identifies the element (or elements) whose contents or presence are controlled by the current element.\n * @see aria-owns.\n */\n \"aria-controls\"?: string | undefined;\n /** Indicates the element that represents the current item within a container or set of related elements. */\n \"aria-current\"?: boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\" | undefined;\n /**\n * Identifies the element (or elements) that describes the object.\n * @see aria-labelledby\n */\n \"aria-describedby\"?: string | undefined;\n /**\n * Defines a string value that describes or annotates the current element.\n * @see related aria-describedby.\n */\n \"aria-description\"?: string | undefined;\n /**\n * Identifies the element that provides a detailed, extended description for the object.\n * @see aria-describedby.\n */\n \"aria-details\"?: string | undefined;\n /**\n * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n * @see aria-hidden @see aria-readonly.\n */\n \"aria-disabled\"?: Booleanish | undefined;\n /**\n * Indicates what functions can be performed when a dragged object is released on the drop target.\n * @deprecated in ARIA 1.1\n */\n \"aria-dropeffect\"?: \"none\" | \"copy\" | \"execute\" | \"link\" | \"move\" | \"popup\" | undefined;\n /**\n * Identifies the element that provides an error message for the object.\n * @see aria-invalid @see aria-describedby.\n */\n \"aria-errormessage\"?: string | undefined;\n /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */\n \"aria-expanded\"?: Booleanish | undefined;\n /**\n * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\n * allows assistive technology to override the general default of reading in document source order.\n */\n \"aria-flowto\"?: string | undefined;\n /**\n * Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n * @deprecated in ARIA 1.1\n */\n \"aria-grabbed\"?: Booleanish | undefined;\n /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */\n \"aria-haspopup\"?: boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\" | undefined;\n /**\n * Indicates whether the element is exposed to an accessibility API.\n * @see aria-disabled.\n */\n \"aria-hidden\"?: Booleanish | undefined;\n /**\n * Indicates the entered value does not conform to the format expected by the application.\n * @see aria-errormessage.\n */\n \"aria-invalid\"?: boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\" | undefined;\n /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */\n \"aria-keyshortcuts\"?: string | undefined;\n /**\n * Defines a string value that labels the current element.\n * @see aria-labelledby.\n */\n \"aria-label\"?: string | undefined;\n /**\n * Identifies the element (or elements) that labels the current element.\n * @see aria-describedby.\n */\n \"aria-labelledby\"?: string | undefined;\n /** Defines the hierarchical level of an element within a structure. */\n \"aria-level\"?: number | undefined;\n /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n \"aria-live\"?: \"off\" | \"assertive\" | \"polite\" | undefined;\n /** Indicates whether an element is modal when displayed. */\n \"aria-modal\"?: Booleanish | undefined;\n /** Indicates whether a text box accepts multiple lines of input or only a single line. */\n \"aria-multiline\"?: Booleanish | undefined;\n /** Indicates that the user may select more than one item from the current selectable descendants. */\n \"aria-multiselectable\"?: Booleanish | undefined;\n /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */\n \"aria-orientation\"?: \"horizontal\" | \"vertical\" | undefined;\n /**\n * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\n * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n * @see aria-controls.\n */\n \"aria-owns\"?: string | undefined;\n /**\n * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\n * A hint could be a sample value or a brief description of the expected format.\n */\n \"aria-placeholder\"?: string | undefined;\n /**\n * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n * @see aria-setsize.\n */\n \"aria-posinset\"?: number | undefined;\n /**\n * Indicates the current \"pressed\" state of toggle buttons.\n * @see aria-checked @see aria-selected.\n */\n \"aria-pressed\"?: boolean | \"false\" | \"mixed\" | \"true\" | undefined;\n /**\n * Indicates that the element is not editable, but is otherwise operable.\n * @see aria-disabled.\n */\n \"aria-readonly\"?: Booleanish | undefined;\n /**\n * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n * @see aria-atomic.\n */\n \"aria-relevant\"?:\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text\"\n | \"text additions\"\n | \"text removals\"\n | undefined;\n /** Indicates that user input is required on the element before a form may be submitted. */\n \"aria-required\"?: Booleanish | undefined;\n /** Defines a human-readable, author-localized description for the role of an element. */\n \"aria-roledescription\"?: string | undefined;\n /**\n * Defines the total number of rows in a table, grid, or treegrid.\n * @see aria-rowindex.\n */\n \"aria-rowcount\"?: number | undefined;\n /**\n * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n * @see aria-rowcount @see aria-rowspan.\n */\n \"aria-rowindex\"?: number | undefined;\n /**\n * Defines a human readable text alternative of aria-rowindex.\n * @see aria-colindextext.\n */\n \"aria-rowindextext\"?: string | undefined;\n /**\n * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n * @see aria-rowindex @see aria-colspan.\n */\n \"aria-rowspan\"?: number | undefined;\n /**\n * Indicates the current \"selected\" state of various widgets.\n * @see aria-checked @see aria-pressed.\n */\n \"aria-selected\"?: Booleanish | undefined;\n /**\n * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n * @see aria-posinset.\n */\n \"aria-setsize\"?: number | undefined;\n /** Indicates if items in a table or grid are sorted in ascending or descending order. */\n \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\" | undefined;\n /** Defines the maximum allowed value for a range widget. */\n \"aria-valuemax\"?: number | undefined;\n /** Defines the minimum allowed value for a range widget. */\n \"aria-valuemin\"?: number | undefined;\n /**\n * Defines the current value for a range widget.\n * @see aria-valuetext.\n */\n \"aria-valuenow\"?: number | undefined;\n /** Defines the human readable text alternative of aria-valuenow for a range widget. */\n \"aria-valuetext\"?: string | undefined;\n }\n\n // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions\n type AriaRole =\n | \"alert\"\n | \"alertdialog\"\n | \"application\"\n | \"article\"\n | \"banner\"\n | \"button\"\n | \"cell\"\n | \"checkbox\"\n | \"columnheader\"\n | \"combobox\"\n | \"complementary\"\n | \"contentinfo\"\n | \"definition\"\n | \"dialog\"\n | \"directory\"\n | \"document\"\n | \"feed\"\n | \"figure\"\n | \"form\"\n | \"grid\"\n | \"gridcell\"\n | \"group\"\n | \"heading\"\n | \"img\"\n | \"link\"\n | \"list\"\n | \"listbox\"\n | \"listitem\"\n | \"log\"\n | \"main\"\n | \"marquee\"\n | \"math\"\n | \"menu\"\n | \"menubar\"\n | \"menuitem\"\n | \"menuitemcheckbox\"\n | \"menuitemradio\"\n | \"navigation\"\n | \"none\"\n | \"note\"\n | \"option\"\n | \"presentation\"\n | \"progressbar\"\n | \"radio\"\n | \"radiogroup\"\n | \"region\"\n | \"row\"\n | \"rowgroup\"\n | \"rowheader\"\n | \"scrollbar\"\n | \"search\"\n | \"searchbox\"\n | \"separator\"\n | \"slider\"\n | \"spinbutton\"\n | \"status\"\n | \"switch\"\n | \"tab\"\n | \"table\"\n | \"tablist\"\n | \"tabpanel\"\n | \"term\"\n | \"textbox\"\n | \"timer\"\n | \"toolbar\"\n | \"tooltip\"\n | \"tree\"\n | \"treegrid\"\n | \"treeitem\"\n | (string & {});\n\n interface HTMLAttributes extends AriaAttributes, DOMAttributes {\n // React-specific Attributes\n defaultChecked?: boolean | undefined;\n defaultValue?: string | number | readonly string[] | undefined;\n suppressContentEditableWarning?: boolean | undefined;\n suppressHydrationWarning?: boolean | undefined;\n\n // Standard HTML Attributes\n accessKey?: string | undefined;\n autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | undefined | (string & {});\n autoFocus?: boolean | undefined;\n className?: string | undefined;\n contentEditable?: Booleanish | \"inherit\" | \"plaintext-only\" | undefined;\n contextMenu?: string | undefined;\n dir?: string | undefined;\n draggable?: Booleanish | undefined;\n enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined;\n hidden?: boolean | undefined;\n id?: string | undefined;\n lang?: string | undefined;\n nonce?: string | undefined;\n slot?: string | undefined;\n spellCheck?: Booleanish | undefined;\n style?: CSSProperties | undefined;\n tabIndex?: number | undefined;\n title?: string | undefined;\n translate?: \"yes\" | \"no\" | undefined;\n\n // Unknown\n radioGroup?: string | undefined; // , \n\n // WAI-ARIA\n role?: AriaRole | undefined;\n\n // RDFa Attributes\n about?: string | undefined;\n content?: string | undefined;\n datatype?: string | undefined;\n inlist?: any;\n prefix?: string | undefined;\n property?: string | undefined;\n rel?: string | undefined;\n resource?: string | undefined;\n rev?: string | undefined;\n typeof?: string | undefined;\n vocab?: string | undefined;\n\n // Non-standard Attributes\n autoCorrect?: string | undefined;\n autoSave?: string | undefined;\n color?: string | undefined;\n itemProp?: string | undefined;\n itemScope?: boolean | undefined;\n itemType?: string | undefined;\n itemID?: string | undefined;\n itemRef?: string | undefined;\n results?: number | undefined;\n security?: string | undefined;\n unselectable?: \"on\" | \"off\" | undefined;\n\n // Living Standard\n /**\n * Hints at the type of data that might be entered by the user while editing the element or its contents\n * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}\n */\n inputMode?: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\" | undefined;\n /**\n * Specify that a standard HTML element should behave like a defined custom built-in element\n * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}\n */\n is?: string | undefined;\n /**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}\n */\n exportparts?: string | undefined;\n /**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}\n */\n part?: string | undefined;\n }\n\n /**\n * For internal usage only.\n * Different release channels declare additional types of ReactNode this particular release channel accepts.\n * App or library types should never augment this interface.\n */\n interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS {}\n\n interface AllHTMLAttributes extends HTMLAttributes {\n // Standard HTML Attributes\n accept?: string | undefined;\n acceptCharset?: string | undefined;\n action?:\n | string\n | undefined\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS\n ];\n allowFullScreen?: boolean | undefined;\n allowTransparency?: boolean | undefined;\n alt?: string | undefined;\n as?: string | undefined;\n async?: boolean | undefined;\n autoComplete?: string | undefined;\n autoPlay?: boolean | undefined;\n capture?: boolean | \"user\" | \"environment\" | undefined;\n cellPadding?: number | string | undefined;\n cellSpacing?: number | string | undefined;\n charSet?: string | undefined;\n challenge?: string | undefined;\n checked?: boolean | undefined;\n cite?: string | undefined;\n classID?: string | undefined;\n cols?: number | undefined;\n colSpan?: number | undefined;\n controls?: boolean | undefined;\n coords?: string | undefined;\n crossOrigin?: CrossOrigin;\n data?: string | undefined;\n dateTime?: string | undefined;\n default?: boolean | undefined;\n defer?: boolean | undefined;\n disabled?: boolean | undefined;\n download?: any;\n encType?: string | undefined;\n form?: string | undefined;\n formAction?:\n | string\n | undefined\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS\n ];\n formEncType?: string | undefined;\n formMethod?: string | undefined;\n formNoValidate?: boolean | undefined;\n formTarget?: string | undefined;\n frameBorder?: number | string | undefined;\n headers?: string | undefined;\n height?: number | string | undefined;\n high?: number | undefined;\n href?: string | undefined;\n hrefLang?: string | undefined;\n htmlFor?: string | undefined;\n httpEquiv?: string | undefined;\n integrity?: string | undefined;\n keyParams?: string | undefined;\n keyType?: string | undefined;\n kind?: string | undefined;\n label?: string | undefined;\n list?: string | undefined;\n loop?: boolean | undefined;\n low?: number | undefined;\n manifest?: string | undefined;\n marginHeight?: number | undefined;\n marginWidth?: number | undefined;\n max?: number | string | undefined;\n maxLength?: number | undefined;\n media?: string | undefined;\n mediaGroup?: string | undefined;\n method?: string | undefined;\n min?: number | string | undefined;\n minLength?: number | undefined;\n multiple?: boolean | undefined;\n muted?: boolean | undefined;\n name?: string | undefined;\n noValidate?: boolean | undefined;\n open?: boolean | undefined;\n optimum?: number | undefined;\n pattern?: string | undefined;\n placeholder?: string | undefined;\n playsInline?: boolean | undefined;\n poster?: string | undefined;\n preload?: string | undefined;\n readOnly?: boolean | undefined;\n required?: boolean | undefined;\n reversed?: boolean | undefined;\n rows?: number | undefined;\n rowSpan?: number | undefined;\n sandbox?: string | undefined;\n scope?: string | undefined;\n scoped?: boolean | undefined;\n scrolling?: string | undefined;\n seamless?: boolean | undefined;\n selected?: boolean | undefined;\n shape?: string | undefined;\n size?: number | undefined;\n sizes?: string | undefined;\n span?: number | undefined;\n src?: string | undefined;\n srcDoc?: string | undefined;\n srcLang?: string | undefined;\n srcSet?: string | undefined;\n start?: number | undefined;\n step?: number | string | undefined;\n summary?: string | undefined;\n target?: string | undefined;\n type?: string | undefined;\n useMap?: string | undefined;\n value?: string | readonly string[] | number | undefined;\n width?: number | string | undefined;\n wmode?: string | undefined;\n wrap?: string | undefined;\n }\n\n type HTMLAttributeReferrerPolicy =\n | \"\"\n | \"no-referrer\"\n | \"no-referrer-when-downgrade\"\n | \"origin\"\n | \"origin-when-cross-origin\"\n | \"same-origin\"\n | \"strict-origin\"\n | \"strict-origin-when-cross-origin\"\n | \"unsafe-url\";\n\n type HTMLAttributeAnchorTarget =\n | \"_self\"\n | \"_blank\"\n | \"_parent\"\n | \"_top\"\n | (string & {});\n\n interface AnchorHTMLAttributes extends HTMLAttributes {\n download?: any;\n href?: string | undefined;\n hrefLang?: string | undefined;\n media?: string | undefined;\n ping?: string | undefined;\n target?: HTMLAttributeAnchorTarget | undefined;\n type?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n }\n\n interface AudioHTMLAttributes extends MediaHTMLAttributes {}\n\n interface AreaHTMLAttributes extends HTMLAttributes {\n alt?: string | undefined;\n coords?: string | undefined;\n download?: any;\n href?: string | undefined;\n hrefLang?: string | undefined;\n media?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n shape?: string | undefined;\n target?: string | undefined;\n }\n\n interface BaseHTMLAttributes extends HTMLAttributes {\n href?: string | undefined;\n target?: string | undefined;\n }\n\n interface BlockquoteHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n }\n\n interface ButtonHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | undefined;\n form?: string | undefined;\n formAction?:\n | string\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS\n ]\n | undefined;\n formEncType?: string | undefined;\n formMethod?: string | undefined;\n formNoValidate?: boolean | undefined;\n formTarget?: string | undefined;\n name?: string | undefined;\n type?: \"submit\" | \"reset\" | \"button\" | undefined;\n value?: string | readonly string[] | number | undefined;\n }\n\n interface CanvasHTMLAttributes extends HTMLAttributes {\n height?: number | string | undefined;\n width?: number | string | undefined;\n }\n\n interface ColHTMLAttributes extends HTMLAttributes {\n span?: number | undefined;\n width?: number | string | undefined;\n }\n\n interface ColgroupHTMLAttributes extends HTMLAttributes {\n span?: number | undefined;\n }\n\n interface DataHTMLAttributes extends HTMLAttributes {\n value?: string | readonly string[] | number | undefined;\n }\n\n interface DetailsHTMLAttributes extends HTMLAttributes {\n open?: boolean | undefined;\n onToggle?: ReactEventHandler | undefined;\n name?: string | undefined;\n }\n\n interface DelHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n dateTime?: string | undefined;\n }\n\n interface DialogHTMLAttributes extends HTMLAttributes {\n closedby?: \"any\" | \"closerequest\" | \"none\" | undefined;\n onCancel?: ReactEventHandler | undefined;\n onClose?: ReactEventHandler | undefined;\n open?: boolean | undefined;\n }\n\n interface EmbedHTMLAttributes extends HTMLAttributes {\n height?: number | string | undefined;\n src?: string | undefined;\n type?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface FieldsetHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | undefined;\n form?: string | undefined;\n name?: string | undefined;\n }\n\n interface FormHTMLAttributes extends HTMLAttributes {\n acceptCharset?: string | undefined;\n action?:\n | string\n | undefined\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS\n ];\n autoComplete?: string | undefined;\n encType?: string | undefined;\n method?: string | undefined;\n name?: string | undefined;\n noValidate?: boolean | undefined;\n target?: string | undefined;\n }\n\n interface HtmlHTMLAttributes extends HTMLAttributes {\n manifest?: string | undefined;\n }\n\n interface IframeHTMLAttributes extends HTMLAttributes {\n allow?: string | undefined;\n allowFullScreen?: boolean | undefined;\n allowTransparency?: boolean | undefined;\n /** @deprecated */\n frameBorder?: number | string | undefined;\n height?: number | string | undefined;\n loading?: \"eager\" | \"lazy\" | undefined;\n /** @deprecated */\n marginHeight?: number | undefined;\n /** @deprecated */\n marginWidth?: number | undefined;\n name?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n sandbox?: string | undefined;\n /** @deprecated */\n scrolling?: string | undefined;\n seamless?: boolean | undefined;\n src?: string | undefined;\n srcDoc?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface ImgHTMLAttributes extends HTMLAttributes {\n alt?: string | undefined;\n crossOrigin?: CrossOrigin;\n decoding?: \"async\" | \"auto\" | \"sync\" | undefined;\n fetchPriority?: \"high\" | \"low\" | \"auto\";\n height?: number | string | undefined;\n loading?: \"eager\" | \"lazy\" | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n sizes?: string | undefined;\n src?: string | undefined;\n srcSet?: string | undefined;\n useMap?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface InsHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n dateTime?: string | undefined;\n }\n\n type HTMLInputTypeAttribute =\n | \"button\"\n | \"checkbox\"\n | \"color\"\n | \"date\"\n | \"datetime-local\"\n | \"email\"\n | \"file\"\n | \"hidden\"\n | \"image\"\n | \"month\"\n | \"number\"\n | \"password\"\n | \"radio\"\n | \"range\"\n | \"reset\"\n | \"search\"\n | \"submit\"\n | \"tel\"\n | \"text\"\n | \"time\"\n | \"url\"\n | \"week\"\n | (string & {});\n\n type AutoFillAddressKind = \"billing\" | \"shipping\";\n type AutoFillBase = \"\" | \"off\" | \"on\";\n type AutoFillContactField =\n | \"email\"\n | \"tel\"\n | \"tel-area-code\"\n | \"tel-country-code\"\n | \"tel-extension\"\n | \"tel-local\"\n | \"tel-local-prefix\"\n | \"tel-local-suffix\"\n | \"tel-national\";\n type AutoFillContactKind = \"home\" | \"mobile\" | \"work\";\n type AutoFillCredentialField = \"webauthn\";\n type AutoFillNormalField =\n | \"additional-name\"\n | \"address-level1\"\n | \"address-level2\"\n | \"address-level3\"\n | \"address-level4\"\n | \"address-line1\"\n | \"address-line2\"\n | \"address-line3\"\n | \"bday-day\"\n | \"bday-month\"\n | \"bday-year\"\n | \"cc-csc\"\n | \"cc-exp\"\n | \"cc-exp-month\"\n | \"cc-exp-year\"\n | \"cc-family-name\"\n | \"cc-given-name\"\n | \"cc-name\"\n | \"cc-number\"\n | \"cc-type\"\n | \"country\"\n | \"country-name\"\n | \"current-password\"\n | \"family-name\"\n | \"given-name\"\n | \"honorific-prefix\"\n | \"honorific-suffix\"\n | \"name\"\n | \"new-password\"\n | \"one-time-code\"\n | \"organization\"\n | \"postal-code\"\n | \"street-address\"\n | \"transaction-amount\"\n | \"transaction-currency\"\n | \"username\";\n type OptionalPrefixToken = `${T} ` | \"\";\n type OptionalPostfixToken = ` ${T}` | \"\";\n type AutoFillField = AutoFillNormalField | `${OptionalPrefixToken}${AutoFillContactField}`;\n type AutoFillSection = `section-${string}`;\n type AutoFill =\n | AutoFillBase\n | `${OptionalPrefixToken}${OptionalPrefixToken<\n AutoFillAddressKind\n >}${AutoFillField}${OptionalPostfixToken}`;\n type HTMLInputAutoCompleteAttribute = AutoFill | (string & {});\n\n interface InputHTMLAttributes extends HTMLAttributes {\n accept?: string | undefined;\n alt?: string | undefined;\n autoComplete?: HTMLInputAutoCompleteAttribute | undefined;\n capture?: boolean | \"user\" | \"environment\" | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute\n checked?: boolean | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n formAction?:\n | string\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS\n ]\n | undefined;\n formEncType?: string | undefined;\n formMethod?: string | undefined;\n formNoValidate?: boolean | undefined;\n formTarget?: string | undefined;\n height?: number | string | undefined;\n list?: string | undefined;\n max?: number | string | undefined;\n maxLength?: number | undefined;\n min?: number | string | undefined;\n minLength?: number | undefined;\n multiple?: boolean | undefined;\n name?: string | undefined;\n pattern?: string | undefined;\n placeholder?: string | undefined;\n readOnly?: boolean | undefined;\n required?: boolean | undefined;\n size?: number | undefined;\n src?: string | undefined;\n step?: number | string | undefined;\n type?: HTMLInputTypeAttribute | undefined;\n value?: string | readonly string[] | number | undefined;\n width?: number | string | undefined;\n\n onChange?: ChangeEventHandler | undefined;\n }\n\n interface KeygenHTMLAttributes extends HTMLAttributes {\n challenge?: string | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n keyType?: string | undefined;\n keyParams?: string | undefined;\n name?: string | undefined;\n }\n\n interface LabelHTMLAttributes extends HTMLAttributes {\n form?: string | undefined;\n htmlFor?: string | undefined;\n }\n\n interface LiHTMLAttributes extends HTMLAttributes {\n value?: string | readonly string[] | number | undefined;\n }\n\n interface LinkHTMLAttributes extends HTMLAttributes {\n as?: string | undefined;\n blocking?: \"render\" | (string & {}) | undefined;\n crossOrigin?: CrossOrigin;\n fetchPriority?: \"high\" | \"low\" | \"auto\";\n href?: string | undefined;\n hrefLang?: string | undefined;\n integrity?: string | undefined;\n media?: string | undefined;\n imageSrcSet?: string | undefined;\n imageSizes?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n sizes?: string | undefined;\n type?: string | undefined;\n charSet?: string | undefined;\n }\n\n interface MapHTMLAttributes extends HTMLAttributes {\n name?: string | undefined;\n }\n\n interface MenuHTMLAttributes extends HTMLAttributes {\n type?: string | undefined;\n }\n\n interface MediaHTMLAttributes extends HTMLAttributes {\n autoPlay?: boolean | undefined;\n controls?: boolean | undefined;\n controlsList?: string | undefined;\n crossOrigin?: CrossOrigin;\n loop?: boolean | undefined;\n mediaGroup?: string | undefined;\n muted?: boolean | undefined;\n playsInline?: boolean | undefined;\n preload?: string | undefined;\n src?: string | undefined;\n }\n\n interface MetaHTMLAttributes extends HTMLAttributes {\n charSet?: string | undefined;\n content?: string | undefined;\n httpEquiv?: string | undefined;\n media?: string | undefined;\n name?: string | undefined;\n }\n\n interface MeterHTMLAttributes extends HTMLAttributes {\n form?: string | undefined;\n high?: number | undefined;\n low?: number | undefined;\n max?: number | string | undefined;\n min?: number | string | undefined;\n optimum?: number | undefined;\n value?: string | readonly string[] | number | undefined;\n }\n\n interface QuoteHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n }\n\n interface ObjectHTMLAttributes extends HTMLAttributes {\n classID?: string | undefined;\n data?: string | undefined;\n form?: string | undefined;\n height?: number | string | undefined;\n name?: string | undefined;\n type?: string | undefined;\n useMap?: string | undefined;\n width?: number | string | undefined;\n wmode?: string | undefined;\n }\n\n interface OlHTMLAttributes extends HTMLAttributes {\n reversed?: boolean | undefined;\n start?: number | undefined;\n type?: \"1\" | \"a\" | \"A\" | \"i\" | \"I\" | undefined;\n }\n\n interface OptgroupHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | undefined;\n label?: string | undefined;\n }\n\n interface OptionHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | undefined;\n label?: string | undefined;\n selected?: boolean | undefined;\n value?: string | readonly string[] | number | undefined;\n }\n\n interface OutputHTMLAttributes extends HTMLAttributes {\n form?: string | undefined;\n htmlFor?: string | undefined;\n name?: string | undefined;\n }\n\n interface ParamHTMLAttributes extends HTMLAttributes {\n name?: string | undefined;\n value?: string | readonly string[] | number | undefined;\n }\n\n interface ProgressHTMLAttributes extends HTMLAttributes {\n max?: number | string | undefined;\n value?: string | readonly string[] | number | undefined;\n }\n\n interface SlotHTMLAttributes extends HTMLAttributes {\n name?: string | undefined;\n }\n\n interface ScriptHTMLAttributes extends HTMLAttributes {\n async?: boolean | undefined;\n blocking?: \"render\" | (string & {}) | undefined;\n /** @deprecated */\n charSet?: string | undefined;\n crossOrigin?: CrossOrigin;\n defer?: boolean | undefined;\n integrity?: string | undefined;\n noModule?: boolean | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n src?: string | undefined;\n type?: string | undefined;\n }\n\n interface SelectHTMLAttributes extends HTMLAttributes {\n autoComplete?: string | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n multiple?: boolean | undefined;\n name?: string | undefined;\n required?: boolean | undefined;\n size?: number | undefined;\n value?: string | readonly string[] | number | undefined;\n onChange?: ChangeEventHandler | undefined;\n }\n\n interface SourceHTMLAttributes extends HTMLAttributes {\n height?: number | string | undefined;\n media?: string | undefined;\n sizes?: string | undefined;\n src?: string | undefined;\n srcSet?: string | undefined;\n type?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface StyleHTMLAttributes extends HTMLAttributes {\n blocking?: \"render\" | (string & {}) | undefined;\n media?: string | undefined;\n scoped?: boolean | undefined;\n type?: string | undefined;\n }\n\n interface TableHTMLAttributes extends HTMLAttributes {\n align?: \"left\" | \"center\" | \"right\" | undefined;\n bgcolor?: string | undefined;\n border?: number | undefined;\n cellPadding?: number | string | undefined;\n cellSpacing?: number | string | undefined;\n frame?: boolean | undefined;\n rules?: \"none\" | \"groups\" | \"rows\" | \"columns\" | \"all\" | undefined;\n summary?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface TextareaHTMLAttributes extends HTMLAttributes {\n autoComplete?: string | undefined;\n cols?: number | undefined;\n dirName?: string | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n maxLength?: number | undefined;\n minLength?: number | undefined;\n name?: string | undefined;\n placeholder?: string | undefined;\n readOnly?: boolean | undefined;\n required?: boolean | undefined;\n rows?: number | undefined;\n value?: string | readonly string[] | number | undefined;\n wrap?: string | undefined;\n\n onChange?: ChangeEventHandler | undefined;\n }\n\n interface TdHTMLAttributes extends HTMLAttributes {\n align?: \"left\" | \"center\" | \"right\" | \"justify\" | \"char\" | undefined;\n colSpan?: number | undefined;\n headers?: string | undefined;\n rowSpan?: number | undefined;\n scope?: string | undefined;\n abbr?: string | undefined;\n height?: number | string | undefined;\n width?: number | string | undefined;\n valign?: \"top\" | \"middle\" | \"bottom\" | \"baseline\" | undefined;\n }\n\n interface ThHTMLAttributes extends HTMLAttributes {\n align?: \"left\" | \"center\" | \"right\" | \"justify\" | \"char\" | undefined;\n colSpan?: number | undefined;\n headers?: string | undefined;\n rowSpan?: number | undefined;\n scope?: string | undefined;\n abbr?: string | undefined;\n }\n\n interface TimeHTMLAttributes extends HTMLAttributes {\n dateTime?: string | undefined;\n }\n\n interface TrackHTMLAttributes extends HTMLAttributes {\n default?: boolean | undefined;\n kind?: string | undefined;\n label?: string | undefined;\n src?: string | undefined;\n srcLang?: string | undefined;\n }\n\n interface VideoHTMLAttributes extends MediaHTMLAttributes {\n height?: number | string | undefined;\n playsInline?: boolean | undefined;\n poster?: string | undefined;\n width?: number | string | undefined;\n disablePictureInPicture?: boolean | undefined;\n disableRemotePlayback?: boolean | undefined;\n\n onResize?: ReactEventHandler | undefined;\n onResizeCapture?: ReactEventHandler | undefined;\n }\n\n // this list is \"complete\" in that it contains every SVG attribute\n // that React supports, but the types can be improved.\n // Full list here: https://facebook.github.io/react/docs/dom-elements.html\n //\n // The three broad type categories are (in order of restrictiveness):\n // - \"number | string\"\n // - \"string\"\n // - union of string literals\n interface SVGAttributes extends AriaAttributes, DOMAttributes {\n // React-specific Attributes\n suppressHydrationWarning?: boolean | undefined;\n\n // Attributes which also defined in HTMLAttributes\n // See comment in SVGDOMPropertyConfig.js\n className?: string | undefined;\n color?: string | undefined;\n height?: number | string | undefined;\n id?: string | undefined;\n lang?: string | undefined;\n max?: number | string | undefined;\n media?: string | undefined;\n method?: string | undefined;\n min?: number | string | undefined;\n name?: string | undefined;\n style?: CSSProperties | undefined;\n target?: string | undefined;\n type?: string | undefined;\n width?: number | string | undefined;\n\n // Other HTML properties supported by SVG elements in browsers\n role?: AriaRole | undefined;\n tabIndex?: number | undefined;\n crossOrigin?: CrossOrigin;\n\n // SVG Specific attributes\n accentHeight?: number | string | undefined;\n accumulate?: \"none\" | \"sum\" | undefined;\n additive?: \"replace\" | \"sum\" | undefined;\n alignmentBaseline?:\n | \"auto\"\n | \"baseline\"\n | \"before-edge\"\n | \"text-before-edge\"\n | \"middle\"\n | \"central\"\n | \"after-edge\"\n | \"text-after-edge\"\n | \"ideographic\"\n | \"alphabetic\"\n | \"hanging\"\n | \"mathematical\"\n | \"inherit\"\n | undefined;\n allowReorder?: \"no\" | \"yes\" | undefined;\n alphabetic?: number | string | undefined;\n amplitude?: number | string | undefined;\n arabicForm?: \"initial\" | \"medial\" | \"terminal\" | \"isolated\" | undefined;\n ascent?: number | string | undefined;\n attributeName?: string | undefined;\n attributeType?: string | undefined;\n autoReverse?: Booleanish | undefined;\n azimuth?: number | string | undefined;\n baseFrequency?: number | string | undefined;\n baselineShift?: number | string | undefined;\n baseProfile?: number | string | undefined;\n bbox?: number | string | undefined;\n begin?: number | string | undefined;\n bias?: number | string | undefined;\n by?: number | string | undefined;\n calcMode?: number | string | undefined;\n capHeight?: number | string | undefined;\n clip?: number | string | undefined;\n clipPath?: string | undefined;\n clipPathUnits?: number | string | undefined;\n clipRule?: number | string | undefined;\n colorInterpolation?: number | string | undefined;\n colorInterpolationFilters?: \"auto\" | \"sRGB\" | \"linearRGB\" | \"inherit\" | undefined;\n colorProfile?: number | string | undefined;\n colorRendering?: number | string | undefined;\n contentScriptType?: number | string | undefined;\n contentStyleType?: number | string | undefined;\n cursor?: number | string | undefined;\n cx?: number | string | undefined;\n cy?: number | string | undefined;\n d?: string | undefined;\n decelerate?: number | string | undefined;\n descent?: number | string | undefined;\n diffuseConstant?: number | string | undefined;\n direction?: number | string | undefined;\n display?: number | string | undefined;\n divisor?: number | string | undefined;\n dominantBaseline?:\n | \"auto\"\n | \"use-script\"\n | \"no-change\"\n | \"reset-size\"\n | \"ideographic\"\n | \"alphabetic\"\n | \"hanging\"\n | \"mathematical\"\n | \"central\"\n | \"middle\"\n | \"text-after-edge\"\n | \"text-before-edge\"\n | \"inherit\"\n | undefined;\n dur?: number | string | undefined;\n dx?: number | string | undefined;\n dy?: number | string | undefined;\n edgeMode?: number | string | undefined;\n elevation?: number | string | undefined;\n enableBackground?: number | string | undefined;\n end?: number | string | undefined;\n exponent?: number | string | undefined;\n externalResourcesRequired?: Booleanish | undefined;\n fill?: string | undefined;\n fillOpacity?: number | string | undefined;\n fillRule?: \"nonzero\" | \"evenodd\" | \"inherit\" | undefined;\n filter?: string | undefined;\n filterRes?: number | string | undefined;\n filterUnits?: number | string | undefined;\n floodColor?: number | string | undefined;\n floodOpacity?: number | string | undefined;\n focusable?: Booleanish | \"auto\" | undefined;\n fontFamily?: string | undefined;\n fontSize?: number | string | undefined;\n fontSizeAdjust?: number | string | undefined;\n fontStretch?: number | string | undefined;\n fontStyle?: number | string | undefined;\n fontVariant?: number | string | undefined;\n fontWeight?: number | string | undefined;\n format?: number | string | undefined;\n fr?: number | string | undefined;\n from?: number | string | undefined;\n fx?: number | string | undefined;\n fy?: number | string | undefined;\n g1?: number | string | undefined;\n g2?: number | string | undefined;\n glyphName?: number | string | undefined;\n glyphOrientationHorizontal?: number | string | undefined;\n glyphOrientationVertical?: number | string | undefined;\n glyphRef?: number | string | undefined;\n gradientTransform?: string | undefined;\n gradientUnits?: string | undefined;\n hanging?: number | string | undefined;\n horizAdvX?: number | string | undefined;\n horizOriginX?: number | string | undefined;\n href?: string | undefined;\n ideographic?: number | string | undefined;\n imageRendering?: number | string | undefined;\n in2?: number | string | undefined;\n in?: string | undefined;\n intercept?: number | string | undefined;\n k1?: number | string | undefined;\n k2?: number | string | undefined;\n k3?: number | string | undefined;\n k4?: number | string | undefined;\n k?: number | string | undefined;\n kernelMatrix?: number | string | undefined;\n kernelUnitLength?: number | string | undefined;\n kerning?: number | string | undefined;\n keyPoints?: number | string | undefined;\n keySplines?: number | string | undefined;\n keyTimes?: number | string | undefined;\n lengthAdjust?: number | string | undefined;\n letterSpacing?: number | string | undefined;\n lightingColor?: number | string | undefined;\n limitingConeAngle?: number | string | undefined;\n local?: number | string | undefined;\n markerEnd?: string | undefined;\n markerHeight?: number | string | undefined;\n markerMid?: string | undefined;\n markerStart?: string | undefined;\n markerUnits?: number | string | undefined;\n markerWidth?: number | string | undefined;\n mask?: string | undefined;\n maskContentUnits?: number | string | undefined;\n maskUnits?: number | string | undefined;\n mathematical?: number | string | undefined;\n mode?: number | string | undefined;\n numOctaves?: number | string | undefined;\n offset?: number | string | undefined;\n opacity?: number | string | undefined;\n operator?: number | string | undefined;\n order?: number | string | undefined;\n orient?: number | string | undefined;\n orientation?: number | string | undefined;\n origin?: number | string | undefined;\n overflow?: number | string | undefined;\n overlinePosition?: number | string | undefined;\n overlineThickness?: number | string | undefined;\n paintOrder?: number | string | undefined;\n panose1?: number | string | undefined;\n path?: string | undefined;\n pathLength?: number | string | undefined;\n patternContentUnits?: string | undefined;\n patternTransform?: number | string | undefined;\n patternUnits?: string | undefined;\n pointerEvents?: number | string | undefined;\n points?: string | undefined;\n pointsAtX?: number | string | undefined;\n pointsAtY?: number | string | undefined;\n pointsAtZ?: number | string | undefined;\n preserveAlpha?: Booleanish | undefined;\n preserveAspectRatio?: string | undefined;\n primitiveUnits?: number | string | undefined;\n r?: number | string | undefined;\n radius?: number | string | undefined;\n refX?: number | string | undefined;\n refY?: number | string | undefined;\n renderingIntent?: number | string | undefined;\n repeatCount?: number | string | undefined;\n repeatDur?: number | string | undefined;\n requiredExtensions?: number | string | undefined;\n requiredFeatures?: number | string | undefined;\n restart?: number | string | undefined;\n result?: string | undefined;\n rotate?: number | string | undefined;\n rx?: number | string | undefined;\n ry?: number | string | undefined;\n scale?: number | string | undefined;\n seed?: number | string | undefined;\n shapeRendering?: number | string | undefined;\n slope?: number | string | undefined;\n spacing?: number | string | undefined;\n specularConstant?: number | string | undefined;\n specularExponent?: number | string | undefined;\n speed?: number | string | undefined;\n spreadMethod?: string | undefined;\n startOffset?: number | string | undefined;\n stdDeviation?: number | string | undefined;\n stemh?: number | string | undefined;\n stemv?: number | string | undefined;\n stitchTiles?: number | string | undefined;\n stopColor?: string | undefined;\n stopOpacity?: number | string | undefined;\n strikethroughPosition?: number | string | undefined;\n strikethroughThickness?: number | string | undefined;\n string?: number | string | undefined;\n stroke?: string | undefined;\n strokeDasharray?: string | number | undefined;\n strokeDashoffset?: string | number | undefined;\n strokeLinecap?: \"butt\" | \"round\" | \"square\" | \"inherit\" | undefined;\n strokeLinejoin?: \"miter\" | \"round\" | \"bevel\" | \"inherit\" | undefined;\n strokeMiterlimit?: number | string | undefined;\n strokeOpacity?: number | string | undefined;\n strokeWidth?: number | string | undefined;\n surfaceScale?: number | string | undefined;\n systemLanguage?: number | string | undefined;\n tableValues?: number | string | undefined;\n targetX?: number | string | undefined;\n targetY?: number | string | undefined;\n textAnchor?: \"start\" | \"middle\" | \"end\" | \"inherit\" | undefined;\n textDecoration?: number | string | undefined;\n textLength?: number | string | undefined;\n textRendering?: number | string | undefined;\n to?: number | string | undefined;\n transform?: string | undefined;\n transformOrigin?: string | undefined;\n u1?: number | string | undefined;\n u2?: number | string | undefined;\n underlinePosition?: number | string | undefined;\n underlineThickness?: number | string | undefined;\n unicode?: number | string | undefined;\n unicodeBidi?: number | string | undefined;\n unicodeRange?: number | string | undefined;\n unitsPerEm?: number | string | undefined;\n vAlphabetic?: number | string | undefined;\n values?: string | undefined;\n vectorEffect?: number | string | undefined;\n version?: string | undefined;\n vertAdvY?: number | string | undefined;\n vertOriginX?: number | string | undefined;\n vertOriginY?: number | string | undefined;\n vHanging?: number | string | undefined;\n vIdeographic?: number | string | undefined;\n viewBox?: string | undefined;\n viewTarget?: number | string | undefined;\n visibility?: number | string | undefined;\n vMathematical?: number | string | undefined;\n widths?: number | string | undefined;\n wordSpacing?: number | string | undefined;\n writingMode?: number | string | undefined;\n x1?: number | string | undefined;\n x2?: number | string | undefined;\n x?: number | string | undefined;\n xChannelSelector?: string | undefined;\n xHeight?: number | string | undefined;\n xlinkActuate?: string | undefined;\n xlinkArcrole?: string | undefined;\n xlinkHref?: string | undefined;\n xlinkRole?: string | undefined;\n xlinkShow?: string | undefined;\n xlinkTitle?: string | undefined;\n xlinkType?: string | undefined;\n xmlBase?: string | undefined;\n xmlLang?: string | undefined;\n xmlns?: string | undefined;\n xmlnsXlink?: string | undefined;\n xmlSpace?: string | undefined;\n y1?: number | string | undefined;\n y2?: number | string | undefined;\n y?: number | string | undefined;\n yChannelSelector?: string | undefined;\n z?: number | string | undefined;\n zoomAndPan?: string | undefined;\n }\n\n interface WebViewHTMLAttributes extends HTMLAttributes {\n allowFullScreen?: boolean | undefined;\n allowpopups?: boolean | undefined;\n autosize?: boolean | undefined;\n blinkfeatures?: string | undefined;\n disableblinkfeatures?: string | undefined;\n disableguestresize?: boolean | undefined;\n disablewebsecurity?: boolean | undefined;\n guestinstance?: string | undefined;\n httpreferrer?: string | undefined;\n nodeintegration?: boolean | undefined;\n partition?: string | undefined;\n plugins?: boolean | undefined;\n preload?: string | undefined;\n src?: string | undefined;\n useragent?: string | undefined;\n webpreferences?: string | undefined;\n }\n\n //\n // React.DOM\n // ----------------------------------------------------------------------\n\n /* deprecated */\n interface ReactHTML {\n a: DetailedHTMLFactory, HTMLAnchorElement>;\n abbr: DetailedHTMLFactory, HTMLElement>;\n address: DetailedHTMLFactory, HTMLElement>;\n area: DetailedHTMLFactory, HTMLAreaElement>;\n article: DetailedHTMLFactory, HTMLElement>;\n aside: DetailedHTMLFactory, HTMLElement>;\n audio: DetailedHTMLFactory, HTMLAudioElement>;\n b: DetailedHTMLFactory, HTMLElement>;\n base: DetailedHTMLFactory, HTMLBaseElement>;\n bdi: DetailedHTMLFactory, HTMLElement>;\n bdo: DetailedHTMLFactory, HTMLElement>;\n big: DetailedHTMLFactory, HTMLElement>;\n blockquote: DetailedHTMLFactory, HTMLQuoteElement>;\n body: DetailedHTMLFactory, HTMLBodyElement>;\n br: DetailedHTMLFactory, HTMLBRElement>;\n button: DetailedHTMLFactory, HTMLButtonElement>;\n canvas: DetailedHTMLFactory, HTMLCanvasElement>;\n caption: DetailedHTMLFactory, HTMLElement>;\n center: DetailedHTMLFactory, HTMLElement>;\n cite: DetailedHTMLFactory, HTMLElement>;\n code: DetailedHTMLFactory, HTMLElement>;\n col: DetailedHTMLFactory, HTMLTableColElement>;\n colgroup: DetailedHTMLFactory, HTMLTableColElement>;\n data: DetailedHTMLFactory, HTMLDataElement>;\n datalist: DetailedHTMLFactory, HTMLDataListElement>;\n dd: DetailedHTMLFactory, HTMLElement>;\n del: DetailedHTMLFactory, HTMLModElement>;\n details: DetailedHTMLFactory, HTMLDetailsElement>;\n dfn: DetailedHTMLFactory, HTMLElement>;\n dialog: DetailedHTMLFactory, HTMLDialogElement>;\n div: DetailedHTMLFactory, HTMLDivElement>;\n dl: DetailedHTMLFactory, HTMLDListElement>;\n dt: DetailedHTMLFactory, HTMLElement>;\n em: DetailedHTMLFactory, HTMLElement>;\n embed: DetailedHTMLFactory, HTMLEmbedElement>;\n fieldset: DetailedHTMLFactory, HTMLFieldSetElement>;\n figcaption: DetailedHTMLFactory, HTMLElement>;\n figure: DetailedHTMLFactory, HTMLElement>;\n footer: DetailedHTMLFactory, HTMLElement>;\n form: DetailedHTMLFactory, HTMLFormElement>;\n h1: DetailedHTMLFactory, HTMLHeadingElement>;\n h2: DetailedHTMLFactory, HTMLHeadingElement>;\n h3: DetailedHTMLFactory, HTMLHeadingElement>;\n h4: DetailedHTMLFactory, HTMLHeadingElement>;\n h5: DetailedHTMLFactory, HTMLHeadingElement>;\n h6: DetailedHTMLFactory, HTMLHeadingElement>;\n head: DetailedHTMLFactory, HTMLHeadElement>;\n header: DetailedHTMLFactory, HTMLElement>;\n hgroup: DetailedHTMLFactory, HTMLElement>;\n hr: DetailedHTMLFactory, HTMLHRElement>;\n html: DetailedHTMLFactory, HTMLHtmlElement>;\n i: DetailedHTMLFactory, HTMLElement>;\n iframe: DetailedHTMLFactory, HTMLIFrameElement>;\n img: DetailedHTMLFactory, HTMLImageElement>;\n input: DetailedHTMLFactory, HTMLInputElement>;\n ins: DetailedHTMLFactory, HTMLModElement>;\n kbd: DetailedHTMLFactory, HTMLElement>;\n keygen: DetailedHTMLFactory, HTMLElement>;\n label: DetailedHTMLFactory, HTMLLabelElement>;\n legend: DetailedHTMLFactory, HTMLLegendElement>;\n li: DetailedHTMLFactory, HTMLLIElement>;\n link: DetailedHTMLFactory, HTMLLinkElement>;\n main: DetailedHTMLFactory, HTMLElement>;\n map: DetailedHTMLFactory, HTMLMapElement>;\n mark: DetailedHTMLFactory, HTMLElement>;\n menu: DetailedHTMLFactory, HTMLElement>;\n menuitem: DetailedHTMLFactory, HTMLElement>;\n meta: DetailedHTMLFactory, HTMLMetaElement>;\n meter: DetailedHTMLFactory, HTMLMeterElement>;\n nav: DetailedHTMLFactory, HTMLElement>;\n noscript: DetailedHTMLFactory, HTMLElement>;\n object: DetailedHTMLFactory, HTMLObjectElement>;\n ol: DetailedHTMLFactory, HTMLOListElement>;\n optgroup: DetailedHTMLFactory, HTMLOptGroupElement>;\n option: DetailedHTMLFactory, HTMLOptionElement>;\n output: DetailedHTMLFactory, HTMLOutputElement>;\n p: DetailedHTMLFactory, HTMLParagraphElement>;\n param: DetailedHTMLFactory, HTMLParamElement>;\n picture: DetailedHTMLFactory, HTMLElement>;\n pre: DetailedHTMLFactory, HTMLPreElement>;\n progress: DetailedHTMLFactory, HTMLProgressElement>;\n q: DetailedHTMLFactory, HTMLQuoteElement>;\n rp: DetailedHTMLFactory, HTMLElement>;\n rt: DetailedHTMLFactory, HTMLElement>;\n ruby: DetailedHTMLFactory, HTMLElement>;\n s: DetailedHTMLFactory, HTMLElement>;\n samp: DetailedHTMLFactory, HTMLElement>;\n search: DetailedHTMLFactory, HTMLElement>;\n slot: DetailedHTMLFactory, HTMLSlotElement>;\n script: DetailedHTMLFactory, HTMLScriptElement>;\n section: DetailedHTMLFactory, HTMLElement>;\n select: DetailedHTMLFactory, HTMLSelectElement>;\n small: DetailedHTMLFactory, HTMLElement>;\n source: DetailedHTMLFactory, HTMLSourceElement>;\n span: DetailedHTMLFactory, HTMLSpanElement>;\n strong: DetailedHTMLFactory, HTMLElement>;\n style: DetailedHTMLFactory, HTMLStyleElement>;\n sub: DetailedHTMLFactory, HTMLElement>;\n summary: DetailedHTMLFactory, HTMLElement>;\n sup: DetailedHTMLFactory, HTMLElement>;\n table: DetailedHTMLFactory, HTMLTableElement>;\n template: DetailedHTMLFactory, HTMLTemplateElement>;\n tbody: DetailedHTMLFactory, HTMLTableSectionElement>;\n td: DetailedHTMLFactory, HTMLTableDataCellElement>;\n textarea: DetailedHTMLFactory, HTMLTextAreaElement>;\n tfoot: DetailedHTMLFactory, HTMLTableSectionElement>;\n th: DetailedHTMLFactory, HTMLTableHeaderCellElement>;\n thead: DetailedHTMLFactory, HTMLTableSectionElement>;\n time: DetailedHTMLFactory, HTMLTimeElement>;\n title: DetailedHTMLFactory, HTMLTitleElement>;\n tr: DetailedHTMLFactory, HTMLTableRowElement>;\n track: DetailedHTMLFactory, HTMLTrackElement>;\n u: DetailedHTMLFactory, HTMLElement>;\n ul: DetailedHTMLFactory, HTMLUListElement>;\n \"var\": DetailedHTMLFactory, HTMLElement>;\n video: DetailedHTMLFactory, HTMLVideoElement>;\n wbr: DetailedHTMLFactory, HTMLElement>;\n webview: DetailedHTMLFactory, HTMLWebViewElement>;\n }\n\n /* deprecated */\n interface ReactSVG {\n animate: SVGFactory;\n circle: SVGFactory;\n clipPath: SVGFactory;\n defs: SVGFactory;\n desc: SVGFactory;\n ellipse: SVGFactory;\n feBlend: SVGFactory;\n feColorMatrix: SVGFactory;\n feComponentTransfer: SVGFactory;\n feComposite: SVGFactory;\n feConvolveMatrix: SVGFactory;\n feDiffuseLighting: SVGFactory;\n feDisplacementMap: SVGFactory;\n feDistantLight: SVGFactory;\n feDropShadow: SVGFactory;\n feFlood: SVGFactory;\n feFuncA: SVGFactory;\n feFuncB: SVGFactory;\n feFuncG: SVGFactory;\n feFuncR: SVGFactory;\n feGaussianBlur: SVGFactory;\n feImage: SVGFactory;\n feMerge: SVGFactory;\n feMergeNode: SVGFactory;\n feMorphology: SVGFactory;\n feOffset: SVGFactory;\n fePointLight: SVGFactory;\n feSpecularLighting: SVGFactory;\n feSpotLight: SVGFactory;\n feTile: SVGFactory;\n feTurbulence: SVGFactory;\n filter: SVGFactory;\n foreignObject: SVGFactory;\n g: SVGFactory;\n image: SVGFactory;\n line: SVGFactory;\n linearGradient: SVGFactory;\n marker: SVGFactory;\n mask: SVGFactory;\n metadata: SVGFactory;\n path: SVGFactory;\n pattern: SVGFactory;\n polygon: SVGFactory;\n polyline: SVGFactory;\n radialGradient: SVGFactory;\n rect: SVGFactory;\n stop: SVGFactory;\n svg: SVGFactory;\n switch: SVGFactory;\n symbol: SVGFactory;\n text: SVGFactory;\n textPath: SVGFactory;\n tspan: SVGFactory;\n use: SVGFactory;\n view: SVGFactory;\n }\n\n /* deprecated */\n interface ReactDOM extends ReactHTML, ReactSVG {}\n\n //\n // React.PropTypes\n // ----------------------------------------------------------------------\n\n /**\n * @deprecated Use `Validator` from the ´prop-types` instead.\n */\n type Validator = PropTypes.Validator;\n\n /**\n * @deprecated Use `Requireable` from the ´prop-types` instead.\n */\n type Requireable = PropTypes.Requireable;\n\n /**\n * @deprecated Use `ValidationMap` from the ´prop-types` instead.\n */\n type ValidationMap = PropTypes.ValidationMap;\n\n /**\n * @deprecated Use `WeakValidationMap` from the ´prop-types` instead.\n */\n type WeakValidationMap = {\n [K in keyof T]?: null extends T[K] ? Validator\n : undefined extends T[K] ? Validator\n : Validator;\n };\n\n /**\n * @deprecated Use `PropTypes.*` where `PropTypes` comes from `import * as PropTypes from 'prop-types'` instead.\n */\n interface ReactPropTypes {\n any: typeof PropTypes.any;\n array: typeof PropTypes.array;\n bool: typeof PropTypes.bool;\n func: typeof PropTypes.func;\n number: typeof PropTypes.number;\n object: typeof PropTypes.object;\n string: typeof PropTypes.string;\n node: typeof PropTypes.node;\n element: typeof PropTypes.element;\n instanceOf: typeof PropTypes.instanceOf;\n oneOf: typeof PropTypes.oneOf;\n oneOfType: typeof PropTypes.oneOfType;\n arrayOf: typeof PropTypes.arrayOf;\n objectOf: typeof PropTypes.objectOf;\n shape: typeof PropTypes.shape;\n exact: typeof PropTypes.exact;\n }\n\n //\n // React.Children\n // ----------------------------------------------------------------------\n\n /**\n * @deprecated - Use `typeof React.Children` instead.\n */\n // Sync with type of `const Children`.\n interface ReactChildren {\n map(\n children: C | readonly C[],\n fn: (child: C, index: number) => T,\n ): C extends null | undefined ? C : Array>;\n forEach(children: C | readonly C[], fn: (child: C, index: number) => void): void;\n count(children: any): number;\n only(children: C): C extends any[] ? never : C;\n toArray(children: ReactNode | ReactNode[]): Array>;\n }\n\n //\n // Browser Interfaces\n // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts\n // ----------------------------------------------------------------------\n\n interface AbstractView {\n styleMedia: StyleMedia;\n document: Document;\n }\n\n interface Touch {\n identifier: number;\n target: EventTarget;\n screenX: number;\n screenY: number;\n clientX: number;\n clientY: number;\n pageX: number;\n pageY: number;\n }\n\n interface TouchList {\n [index: number]: Touch;\n length: number;\n item(index: number): Touch;\n identifiedTouch(identifier: number): Touch;\n }\n\n //\n // Error Interfaces\n // ----------------------------------------------------------------------\n interface ErrorInfo {\n /**\n * Captures which component contained the exception, and its ancestors.\n */\n componentStack?: string | null;\n digest?: string | null;\n }\n\n // Keep in sync with JSX namespace in ./jsx-runtime.d.ts and ./jsx-dev-runtime.d.ts\n namespace JSX {\n type ElementType = GlobalJSXElementType;\n interface Element extends GlobalJSXElement {}\n interface ElementClass extends GlobalJSXElementClass {}\n interface ElementAttributesProperty extends GlobalJSXElementAttributesProperty {}\n interface ElementChildrenAttribute extends GlobalJSXElementChildrenAttribute {}\n\n type LibraryManagedAttributes = GlobalJSXLibraryManagedAttributes;\n\n interface IntrinsicAttributes extends GlobalJSXIntrinsicAttributes {}\n interface IntrinsicClassAttributes extends GlobalJSXIntrinsicClassAttributes {}\n interface IntrinsicElements extends GlobalJSXIntrinsicElements {}\n }\n}\n\n// naked 'any' type in a conditional type will short circuit and union both the then/else branches\n// so boolean is only resolved for T = any\ntype IsExactlyAny = boolean extends (T extends never ? true : false) ? true : false;\n\ntype ExactlyAnyPropertyKeys = { [K in keyof T]: IsExactlyAny extends true ? K : never }[keyof T];\ntype NotExactlyAnyPropertyKeys = Exclude>;\n\n// Try to resolve ill-defined props like for JS users: props can be any, or sometimes objects with properties of type any\ntype MergePropTypes =\n // Distribute over P in case it is a union type\n P extends any\n // If props is type any, use propTypes definitions\n ? IsExactlyAny

extends true ? T\n // If declared props have indexed properties, ignore inferred props entirely as keyof gets widened\n : string extends keyof P ? P\n // Prefer declared types which are not exactly any\n :\n & Pick>\n // For props which are exactly any, use the type inferred from propTypes if present\n & Pick>>\n // Keep leftover props not specified in propTypes\n & Pick>\n : never;\n\ntype InexactPartial = { [K in keyof T]?: T[K] | undefined };\n\n// Any prop that has a default prop becomes optional, but its type is unchanged\n// Undeclared default props are augmented into the resulting allowable attributes\n// If declared props have indexed properties, ignore default props entirely as keyof gets widened\n// Wrap in an outer-level conditional type to allow distribution over props that are unions\ntype Defaultize = P extends any ? string extends keyof P ? P\n :\n & Pick>\n & InexactPartial>>\n & InexactPartial>>\n : never;\n\ntype ReactManagedAttributes = C extends { propTypes: infer T; defaultProps: infer D }\n ? Defaultize>, D>\n : C extends { propTypes: infer T } ? MergePropTypes>\n : C extends { defaultProps: infer D } ? Defaultize\n : P;\n\ndeclare global {\n /**\n * @deprecated Use `React.JSX` instead of the global `JSX` namespace.\n */\n namespace JSX {\n // We don't just alias React.ElementType because React.ElementType\n // historically does more than we need it to.\n // E.g. it also contains .propTypes and so TS also verifies the declared\n // props type does match the declared .propTypes.\n // But if libraries declared their .propTypes but not props type,\n // or they mismatch, you won't be able to use the class component\n // as a JSX.ElementType.\n // We could fix this everywhere but we're ultimately not interested in\n // .propTypes assignability so we might as well drop it entirely here to\n // reduce the work of the type-checker.\n // TODO: Check impact of making React.ElementType

= React.JSXElementConstructor

\n type ElementType = string | React.JSXElementConstructor;\n interface Element extends React.ReactElement {}\n interface ElementClass extends React.Component {\n render(): React.ReactNode;\n }\n interface ElementAttributesProperty {\n props: {};\n }\n interface ElementChildrenAttribute {\n children: {};\n }\n\n // We can't recurse forever because `type` can't be self-referential;\n // let's assume it's reasonable to do a single React.lazy() around a single React.memo() / vice-versa\n type LibraryManagedAttributes = C extends\n React.MemoExoticComponent | React.LazyExoticComponent\n ? T extends React.MemoExoticComponent | React.LazyExoticComponent\n ? ReactManagedAttributes\n : ReactManagedAttributes\n : ReactManagedAttributes;\n\n interface IntrinsicAttributes extends React.Attributes {}\n interface IntrinsicClassAttributes extends React.ClassAttributes {}\n\n interface IntrinsicElements {\n // HTML\n a: React.DetailedHTMLProps, HTMLAnchorElement>;\n abbr: React.DetailedHTMLProps, HTMLElement>;\n address: React.DetailedHTMLProps, HTMLElement>;\n area: React.DetailedHTMLProps, HTMLAreaElement>;\n article: React.DetailedHTMLProps, HTMLElement>;\n aside: React.DetailedHTMLProps, HTMLElement>;\n audio: React.DetailedHTMLProps, HTMLAudioElement>;\n b: React.DetailedHTMLProps, HTMLElement>;\n base: React.DetailedHTMLProps, HTMLBaseElement>;\n bdi: React.DetailedHTMLProps, HTMLElement>;\n bdo: React.DetailedHTMLProps, HTMLElement>;\n big: React.DetailedHTMLProps, HTMLElement>;\n blockquote: React.DetailedHTMLProps, HTMLQuoteElement>;\n body: React.DetailedHTMLProps, HTMLBodyElement>;\n br: React.DetailedHTMLProps, HTMLBRElement>;\n button: React.DetailedHTMLProps, HTMLButtonElement>;\n canvas: React.DetailedHTMLProps, HTMLCanvasElement>;\n caption: React.DetailedHTMLProps, HTMLElement>;\n center: React.DetailedHTMLProps, HTMLElement>;\n cite: React.DetailedHTMLProps, HTMLElement>;\n code: React.DetailedHTMLProps, HTMLElement>;\n col: React.DetailedHTMLProps, HTMLTableColElement>;\n colgroup: React.DetailedHTMLProps, HTMLTableColElement>;\n data: React.DetailedHTMLProps, HTMLDataElement>;\n datalist: React.DetailedHTMLProps, HTMLDataListElement>;\n dd: React.DetailedHTMLProps, HTMLElement>;\n del: React.DetailedHTMLProps, HTMLModElement>;\n details: React.DetailedHTMLProps, HTMLDetailsElement>;\n dfn: React.DetailedHTMLProps, HTMLElement>;\n dialog: React.DetailedHTMLProps, HTMLDialogElement>;\n div: React.DetailedHTMLProps, HTMLDivElement>;\n dl: React.DetailedHTMLProps, HTMLDListElement>;\n dt: React.DetailedHTMLProps, HTMLElement>;\n em: React.DetailedHTMLProps, HTMLElement>;\n embed: React.DetailedHTMLProps, HTMLEmbedElement>;\n fieldset: React.DetailedHTMLProps, HTMLFieldSetElement>;\n figcaption: React.DetailedHTMLProps, HTMLElement>;\n figure: React.DetailedHTMLProps, HTMLElement>;\n footer: React.DetailedHTMLProps, HTMLElement>;\n form: React.DetailedHTMLProps, HTMLFormElement>;\n h1: React.DetailedHTMLProps, HTMLHeadingElement>;\n h2: React.DetailedHTMLProps, HTMLHeadingElement>;\n h3: React.DetailedHTMLProps, HTMLHeadingElement>;\n h4: React.DetailedHTMLProps, HTMLHeadingElement>;\n h5: React.DetailedHTMLProps, HTMLHeadingElement>;\n h6: React.DetailedHTMLProps, HTMLHeadingElement>;\n head: React.DetailedHTMLProps, HTMLHeadElement>;\n header: React.DetailedHTMLProps, HTMLElement>;\n hgroup: React.DetailedHTMLProps, HTMLElement>;\n hr: React.DetailedHTMLProps, HTMLHRElement>;\n html: React.DetailedHTMLProps, HTMLHtmlElement>;\n i: React.DetailedHTMLProps, HTMLElement>;\n iframe: React.DetailedHTMLProps, HTMLIFrameElement>;\n img: React.DetailedHTMLProps, HTMLImageElement>;\n input: React.DetailedHTMLProps, HTMLInputElement>;\n ins: React.DetailedHTMLProps, HTMLModElement>;\n kbd: React.DetailedHTMLProps, HTMLElement>;\n keygen: React.DetailedHTMLProps, HTMLElement>;\n label: React.DetailedHTMLProps, HTMLLabelElement>;\n legend: React.DetailedHTMLProps, HTMLLegendElement>;\n li: React.DetailedHTMLProps, HTMLLIElement>;\n link: React.DetailedHTMLProps, HTMLLinkElement>;\n main: React.DetailedHTMLProps, HTMLElement>;\n map: React.DetailedHTMLProps, HTMLMapElement>;\n mark: React.DetailedHTMLProps, HTMLElement>;\n menu: React.DetailedHTMLProps, HTMLElement>;\n menuitem: React.DetailedHTMLProps, HTMLElement>;\n meta: React.DetailedHTMLProps, HTMLMetaElement>;\n meter: React.DetailedHTMLProps, HTMLMeterElement>;\n nav: React.DetailedHTMLProps, HTMLElement>;\n noindex: React.DetailedHTMLProps, HTMLElement>;\n noscript: React.DetailedHTMLProps, HTMLElement>;\n object: React.DetailedHTMLProps, HTMLObjectElement>;\n ol: React.DetailedHTMLProps, HTMLOListElement>;\n optgroup: React.DetailedHTMLProps, HTMLOptGroupElement>;\n option: React.DetailedHTMLProps, HTMLOptionElement>;\n output: React.DetailedHTMLProps, HTMLOutputElement>;\n p: React.DetailedHTMLProps, HTMLParagraphElement>;\n param: React.DetailedHTMLProps, HTMLParamElement>;\n picture: React.DetailedHTMLProps, HTMLElement>;\n pre: React.DetailedHTMLProps, HTMLPreElement>;\n progress: React.DetailedHTMLProps, HTMLProgressElement>;\n q: React.DetailedHTMLProps, HTMLQuoteElement>;\n rp: React.DetailedHTMLProps, HTMLElement>;\n rt: React.DetailedHTMLProps, HTMLElement>;\n ruby: React.DetailedHTMLProps, HTMLElement>;\n s: React.DetailedHTMLProps, HTMLElement>;\n samp: React.DetailedHTMLProps, HTMLElement>;\n search: React.DetailedHTMLProps, HTMLElement>;\n slot: React.DetailedHTMLProps, HTMLSlotElement>;\n script: React.DetailedHTMLProps, HTMLScriptElement>;\n section: React.DetailedHTMLProps, HTMLElement>;\n select: React.DetailedHTMLProps, HTMLSelectElement>;\n small: React.DetailedHTMLProps, HTMLElement>;\n source: React.DetailedHTMLProps, HTMLSourceElement>;\n span: React.DetailedHTMLProps, HTMLSpanElement>;\n strong: React.DetailedHTMLProps, HTMLElement>;\n style: React.DetailedHTMLProps, HTMLStyleElement>;\n sub: React.DetailedHTMLProps, HTMLElement>;\n summary: React.DetailedHTMLProps, HTMLElement>;\n sup: React.DetailedHTMLProps, HTMLElement>;\n table: React.DetailedHTMLProps, HTMLTableElement>;\n template: React.DetailedHTMLProps, HTMLTemplateElement>;\n tbody: React.DetailedHTMLProps, HTMLTableSectionElement>;\n td: React.DetailedHTMLProps, HTMLTableDataCellElement>;\n textarea: React.DetailedHTMLProps, HTMLTextAreaElement>;\n tfoot: React.DetailedHTMLProps, HTMLTableSectionElement>;\n th: React.DetailedHTMLProps, HTMLTableHeaderCellElement>;\n thead: React.DetailedHTMLProps, HTMLTableSectionElement>;\n time: React.DetailedHTMLProps, HTMLTimeElement>;\n title: React.DetailedHTMLProps, HTMLTitleElement>;\n tr: React.DetailedHTMLProps, HTMLTableRowElement>;\n track: React.DetailedHTMLProps, HTMLTrackElement>;\n u: React.DetailedHTMLProps, HTMLElement>;\n ul: React.DetailedHTMLProps, HTMLUListElement>;\n \"var\": React.DetailedHTMLProps, HTMLElement>;\n video: React.DetailedHTMLProps, HTMLVideoElement>;\n wbr: React.DetailedHTMLProps, HTMLElement>;\n webview: React.DetailedHTMLProps, HTMLWebViewElement>;\n\n // SVG\n svg: React.SVGProps;\n\n animate: React.SVGProps; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now.\n animateMotion: React.SVGProps;\n animateTransform: React.SVGProps; // TODO: It is SVGAnimateTransformElement but is not in TypeScript's lib.dom.d.ts for now.\n circle: React.SVGProps;\n clipPath: React.SVGProps;\n defs: React.SVGProps;\n desc: React.SVGProps;\n ellipse: React.SVGProps;\n feBlend: React.SVGProps;\n feColorMatrix: React.SVGProps;\n feComponentTransfer: React.SVGProps;\n feComposite: React.SVGProps;\n feConvolveMatrix: React.SVGProps;\n feDiffuseLighting: React.SVGProps;\n feDisplacementMap: React.SVGProps;\n feDistantLight: React.SVGProps;\n feDropShadow: React.SVGProps;\n feFlood: React.SVGProps;\n feFuncA: React.SVGProps;\n feFuncB: React.SVGProps;\n feFuncG: React.SVGProps;\n feFuncR: React.SVGProps;\n feGaussianBlur: React.SVGProps;\n feImage: React.SVGProps;\n feMerge: React.SVGProps;\n feMergeNode: React.SVGProps;\n feMorphology: React.SVGProps;\n feOffset: React.SVGProps;\n fePointLight: React.SVGProps;\n feSpecularLighting: React.SVGProps;\n feSpotLight: React.SVGProps;\n feTile: React.SVGProps;\n feTurbulence: React.SVGProps;\n filter: React.SVGProps;\n foreignObject: React.SVGProps;\n g: React.SVGProps;\n image: React.SVGProps;\n line: React.SVGLineElementAttributes;\n linearGradient: React.SVGProps;\n marker: React.SVGProps;\n mask: React.SVGProps;\n metadata: React.SVGProps;\n mpath: React.SVGProps;\n path: React.SVGProps;\n pattern: React.SVGProps;\n polygon: React.SVGProps;\n polyline: React.SVGProps;\n radialGradient: React.SVGProps;\n rect: React.SVGProps;\n set: React.SVGProps;\n stop: React.SVGProps;\n switch: React.SVGProps;\n symbol: React.SVGProps;\n text: React.SVGTextElementAttributes;\n textPath: React.SVGProps;\n tspan: React.SVGProps;\n use: React.SVGProps;\n view: React.SVGProps;\n }\n }\n}\n\n// React.JSX needs to point to global.JSX to keep global module augmentations intact.\n// But we can't access global.JSX so we need to create these aliases instead.\n// Once the global JSX namespace will be removed we replace React.JSX with the contents of global.JSX\ntype GlobalJSXElementType = JSX.ElementType;\ninterface GlobalJSXElement extends JSX.Element {}\ninterface GlobalJSXElementClass extends JSX.ElementClass {}\ninterface GlobalJSXElementAttributesProperty extends JSX.ElementAttributesProperty {}\ninterface GlobalJSXElementChildrenAttribute extends JSX.ElementChildrenAttribute {}\n\ntype GlobalJSXLibraryManagedAttributes = JSX.LibraryManagedAttributes;\n\ninterface GlobalJSXIntrinsicAttributes extends JSX.IntrinsicAttributes {}\ninterface GlobalJSXIntrinsicClassAttributes extends JSX.IntrinsicClassAttributes {}\n\ninterface GlobalJSXIntrinsicElements extends JSX.IntrinsicElements {}\n" +} diff --git a/client/src/templates/Challenges/rechallenge/transformers.js b/client/src/templates/Challenges/rechallenge/transformers.js index 1d0b263042d..200b5a81437 100644 --- a/client/src/templates/Challenges/rechallenge/transformers.js +++ b/client/src/templates/Challenges/rechallenge/transformers.js @@ -96,13 +96,20 @@ const NBSPReg = new RegExp(String.fromCharCode(160), 'g'); const testJS = matchesProperty('ext', 'js'); const testJSX = matchesProperty('ext', 'jsx'); +const testTSX = matchesProperty('ext', 'tsx'); const testTypeScript = matchesProperty('ext', 'ts'); const testHTML = matchesProperty('ext', 'html'); -const testHTML$JS$JSX$TS = overSome(testHTML, testJS, testJSX, testTypeScript); +const testHTML$JS$JSX$TS$TSX = overSome( + testHTML, + testJS, + testJSX, + testTypeScript, + testTSX +); const replaceNBSP = cond([ [ - testHTML$JS$JSX$TS, + testHTML$JS$JSX$TS$TSX, partial(transformContents, contents => contents.replace(NBSPReg, ' ')) ], [stubTrue, identity] @@ -150,6 +157,22 @@ const getTSTranspiler = loopProtectOptions => async challengeFile => { )(challengeFile); }; +const getTSXModuleTranspiler = loopProtectOptions => async challengeFile => { + await loadBabel(); + await loadPresetReact(); + await checkTSServiceIsReady(); + const baseOptions = getBabelOptions(presetsJSX, loopProtectOptions); + const babelOptions = { + ...baseOptions, + plugins: [...baseOptions.plugins, MODULE_TRANSFORM_PLUGIN], + moduleId: 'index' // TODO: this should be dynamic + }; + return flow( + partial(transformHeadTailAndContents, compileTypeScriptCode), + partial(transformHeadTailAndContents, babelTransformCode(babelOptions)) + )(challengeFile); +}; + const createTranspiler = loopProtectOptions => { return cond([ [testJS, getJSTranspiler(loopProtectOptions)], @@ -163,6 +186,7 @@ const createTranspiler = loopProtectOptions => { const createModuleTransformer = loopProtectOptions => { return cond([ [testJSX, getJSXModuleTranspiler(loopProtectOptions)], + [testTSX, getTSXModuleTranspiler(loopProtectOptions)], [testHTML, getHtmlTranspiler({ useModules: true })], [stubTrue, identity] ]); @@ -242,7 +266,7 @@ async function transformScript(documentElement, { useModules }) { // This does the final transformations of the files needed to embed them into // HTML. export const embedFilesInHtml = async function (challengeFiles) { - const { indexHtml, stylesCss, scriptJs, indexJsx, indexTs } = + const { indexHtml, stylesCss, scriptJs, indexJsx, indexTs, indexTsx } = challengeFilesToObject(challengeFiles); const embedStylesAndScript = contentDocument => { @@ -266,6 +290,14 @@ export const embedFilesInHtml = async function (challengeFiles) { `script[data-plugins="${MODULE_TRANSFORM_PLUGIN}"][type="text/babel"][src="./index.jsx"]` ); + const tsxScript = + documentElement.querySelector( + `script[data-plugins="${MODULE_TRANSFORM_PLUGIN}"][type="text/babel"][src="index.tsx"]` + ) ?? + documentElement.querySelector( + `script[data-plugins="${MODULE_TRANSFORM_PLUGIN}"][type="text/babel"][src="./index.tsx"]` + ); + if (link) { const style = contentDocument.createElement('style'); style.classList.add('fcc-injected-styles'); @@ -293,6 +325,13 @@ export const embedFilesInHtml = async function (challengeFiles) { jsxScript.setAttribute('data-src', 'index.jsx'); jsxScript.setAttribute('data-type', 'text/babel'); } + if (tsxScript) { + tsxScript.innerHTML = indexTsx?.contents; + tsxScript.removeAttribute('src'); + tsxScript.removeAttribute('type'); + tsxScript.setAttribute('data-src', 'index.tsx'); + tsxScript.setAttribute('data-type', 'text/babel'); + } return documentElement.innerHTML; }; @@ -308,8 +347,10 @@ export const embedFilesInHtml = async function (challengeFiles) { return ``; } else if (indexTs) { return ``; + } else if (indexTsx) { + return ``; } else { - throw Error('No html, ts or js(x) file found'); + throw Error('No html, ts(x) or js(x) file found'); } }; @@ -319,7 +360,8 @@ function challengeFilesToObject(challengeFiles) { const stylesCss = challengeFiles.find(file => file.fileKey === 'stylescss'); const scriptJs = challengeFiles.find(file => file.fileKey === 'scriptjs'); const indexTs = challengeFiles.find(file => file.fileKey === 'indexts'); - return { indexHtml, indexJsx, stylesCss, scriptJs, indexTs }; + const indexTsx = challengeFiles.find(file => file.fileKey === 'indextsx'); + return { indexHtml, indexJsx, stylesCss, scriptJs, indexTs, indexTsx }; } const parseAndTransform = async function (transform, contents) { diff --git a/client/src/templates/Challenges/utils/build.ts b/client/src/templates/Challenges/utils/build.ts index 9ae46ef6eb2..130e5a48d08 100644 --- a/client/src/templates/Challenges/utils/build.ts +++ b/client/src/templates/Challenges/utils/build.ts @@ -186,7 +186,7 @@ export async function buildDOMChallenge( // TODO: make this required in the schema. if (!challengeFiles) throw Error('No challenge files provided'); const hasJsx = challengeFiles.some( - challengeFile => challengeFile.ext === 'jsx' + challengeFile => challengeFile.ext === 'jsx' || challengeFile.ext === 'tsx' ); const isMultifile = challengeFiles.length > 1; diff --git a/client/src/templates/Challenges/utils/index.ts b/client/src/templates/Challenges/utils/index.ts index edeb3e5e0b5..843f4975914 100644 --- a/client/src/templates/Challenges/utils/index.ts +++ b/client/src/templates/Challenges/utils/index.ts @@ -52,7 +52,8 @@ export function enhancePrismAccessibility( json: 'JSON', pug: 'pug', ts: 'TypeScript', - typescript: 'TypeScript' + typescript: 'TypeScript', + tsx: 'TSX' }; const parent = prismEnv?.element?.parentElement; if ( diff --git a/tools/client-plugins/browser-scripts/react-types.json b/tools/client-plugins/browser-scripts/react-types.json new file mode 100644 index 00000000000..c4e908a4c0e --- /dev/null +++ b/tools/client-plugins/browser-scripts/react-types.json @@ -0,0 +1,3 @@ +{ + "react-18": "// NOTE: Users of the `experimental` builds of React should add a reference\n// to 'react/experimental' in their project. See experimental.d.ts's top comment\n// for reference and documentation on how exactly to do it.\n\n/// \n\nimport * as CSS from \"csstype\";\nimport * as PropTypes from \"prop-types\";\n\ntype NativeAnimationEvent = AnimationEvent;\ntype NativeClipboardEvent = ClipboardEvent;\ntype NativeCompositionEvent = CompositionEvent;\ntype NativeDragEvent = DragEvent;\ntype NativeFocusEvent = FocusEvent;\ntype NativeInputEvent = InputEvent;\ntype NativeKeyboardEvent = KeyboardEvent;\ntype NativeMouseEvent = MouseEvent;\ntype NativeTouchEvent = TouchEvent;\ntype NativePointerEvent = PointerEvent;\ntype NativeTransitionEvent = TransitionEvent;\ntype NativeUIEvent = UIEvent;\ntype NativeWheelEvent = WheelEvent;\n\n/**\n * Used to represent DOM API's where users can either pass\n * true or false as a boolean or as its equivalent strings.\n */\ntype Booleanish = boolean | \"true\" | \"false\";\n\n/**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin MDN}\n */\ntype CrossOrigin = \"anonymous\" | \"use-credentials\" | \"\" | undefined;\n\ndeclare const UNDEFINED_VOID_ONLY: unique symbol;\n\n/**\n * The function returned from an effect passed to {@link React.useEffect useEffect},\n * which can be used to clean up the effect when the component unmounts.\n *\n * @see {@link https://react.dev/reference/react/useEffect React Docs}\n */\ntype Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };\ntype VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };\n\n// eslint-disable-next-line @definitelytyped/export-just-namespace\nexport = React;\nexport as namespace React;\n\ndeclare namespace React {\n //\n // React Elements\n // ----------------------------------------------------------------------\n\n /**\n * Used to retrieve the possible components which accept a given set of props.\n *\n * Can be passed no type parameters to get a union of all possible components\n * and tags.\n *\n * Is a superset of {@link ComponentType}.\n *\n * @template P The props to match against. If not passed, defaults to any.\n * @template Tag An optional tag to match against. If not passed, attempts to match against all possible tags.\n *\n * @example\n *\n * ```tsx\n * // All components and tags (img, embed etc.)\n * // which accept `src`\n * type SrcComponents = ElementType<{ src: any }>;\n * ```\n *\n * @example\n *\n * ```tsx\n * // All components\n * type AllComponents = ElementType;\n * ```\n *\n * @example\n *\n * ```tsx\n * // All custom components which match `src`, and tags which\n * // match `src`, narrowed down to just `audio` and `embed`\n * type SrcComponents = ElementType<{ src: any }, 'audio' | 'embed'>;\n * ```\n */\n type ElementType

=\n | { [K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never }[Tag]\n | ComponentType

;\n\n /**\n * Represents any user-defined component, either as a function or a class.\n *\n * Similar to {@link JSXElementConstructor}, but with extra properties like\n * {@link FunctionComponent.defaultProps defaultProps } and\n * {@link ComponentClass.contextTypes contextTypes}.\n *\n * @template P The props the component accepts.\n *\n * @see {@link ComponentClass}\n * @see {@link FunctionComponent}\n */\n type ComponentType

= ComponentClass

| FunctionComponent

;\n\n /**\n * Represents any user-defined component, either as a function or a class.\n *\n * Similar to {@link ComponentType}, but without extra properties like\n * {@link FunctionComponent.defaultProps defaultProps } and\n * {@link ComponentClass.contextTypes contextTypes}.\n *\n * @template P The props the component accepts.\n */\n type JSXElementConstructor

=\n | ((\n props: P,\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-stateless-function-components React Docs}\n */\n deprecatedLegacyContext?: any,\n ) => ReactNode)\n | (new(\n props: P,\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}\n */\n deprecatedLegacyContext?: any,\n ) => Component);\n\n /**\n * A readonly ref container where {@link current} cannot be mutated.\n *\n * Created by {@link createRef}, or {@link useRef} when passed `null`.\n *\n * @template T The type of the ref's value.\n *\n * @example\n *\n * ```tsx\n * const ref = createRef();\n *\n * ref.current = document.createElement('div'); // Error\n * ```\n */\n interface RefObject {\n /**\n * The current value of the ref.\n */\n readonly current: T | null;\n }\n\n interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES {\n }\n /**\n * A callback fired whenever the ref's value changes.\n *\n * @template T The type of the ref's value.\n *\n * @see {@link https://react.dev/reference/react-dom/components/common#ref-callback React Docs}\n *\n * @example\n *\n * ```tsx\n *

console.log(node)} />\n * ```\n */\n type RefCallback = {\n bivarianceHack(\n instance: T | null,\n ):\n | void\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES\n ];\n }[\"bivarianceHack\"];\n\n /**\n * A union type of all possible shapes for React refs.\n *\n * @see {@link RefCallback}\n * @see {@link RefObject}\n */\n\n type Ref = RefCallback | RefObject | null;\n /**\n * A legacy implementation of refs where you can pass a string to a ref prop.\n *\n * @see {@link https://react.dev/reference/react/Component#refs React Docs}\n *\n * @example\n *\n * ```tsx\n *
\n * ```\n */\n // TODO: Remove the string ref special case from `PropsWithRef` once we remove LegacyRef\n type LegacyRef = string | Ref;\n\n /**\n * Retrieves the type of the 'ref' prop for a given component type or tag name.\n *\n * @template C The component type.\n *\n * @example\n *\n * ```tsx\n * type MyComponentRef = React.ElementRef;\n * ```\n *\n * @example\n *\n * ```tsx\n * type DivRef = React.ElementRef<'div'>;\n * ```\n */\n type ElementRef<\n C extends\n | ForwardRefExoticComponent\n | { new(props: any): Component }\n | ((props: any, deprecatedLegacyContext?: any) => ReactNode)\n | keyof JSX.IntrinsicElements,\n > =\n // need to check first if `ref` is a valid prop for ts@3.0\n // otherwise it will infer `{}` instead of `never`\n \"ref\" extends keyof ComponentPropsWithRef\n ? NonNullable[\"ref\"]> extends RefAttributes<\n infer Instance\n >[\"ref\"] ? Instance\n : never\n : never;\n\n type ComponentState = any;\n\n /**\n * A value which uniquely identifies a node among items in an array.\n *\n * @see {@link https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key React Docs}\n */\n type Key = string | number | bigint;\n\n /**\n * @internal The props any component can receive.\n * You don't have to add this type. All components automatically accept these props.\n * ```tsx\n * const Component = () =>
;\n * \n * ```\n *\n * WARNING: The implementation of a component will never have access to these attributes.\n * The following example would be incorrect usage because {@link Component} would never have access to `key`:\n * ```tsx\n * const Component = (props: React.Attributes) => props.key;\n * ```\n */\n interface Attributes {\n key?: Key | null | undefined;\n }\n /**\n * The props any component accepting refs can receive.\n * Class components, built-in browser components (e.g. `div`) and forwardRef components can receive refs and automatically accept these props.\n * ```tsx\n * const Component = forwardRef(() =>
);\n * console.log(current)} />\n * ```\n *\n * You only need this type if you manually author the types of props that need to be compatible with legacy refs.\n * ```tsx\n * interface Props extends React.RefAttributes {}\n * declare const Component: React.FunctionComponent;\n * ```\n *\n * Otherwise it's simpler to directly use {@link Ref} since you can safely use the\n * props type to describe to props that a consumer can pass to the component\n * as well as describing the props the implementation of a component \"sees\".\n * {@link RefAttributes} is generally not safe to describe both consumer and seen props.\n *\n * ```tsx\n * interface Props extends {\n * ref?: React.Ref | undefined;\n * }\n * declare const Component: React.FunctionComponent;\n * ```\n *\n * WARNING: The implementation of a component will not have access to the same type in versions of React supporting string refs.\n * The following example would be incorrect usage because {@link Component} would never have access to a `ref` with type `string`\n * ```tsx\n * const Component = (props: React.RefAttributes) => props.ref;\n * ```\n */\n interface RefAttributes extends Attributes {\n /**\n * Allows getting a ref to the component instance.\n * Once the component unmounts, React will set `ref.current` to `null`\n * (or call the ref with `null` if you passed a callback ref).\n *\n * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}\n */\n ref?: LegacyRef | undefined;\n }\n\n /**\n * Represents the built-in attributes available to class components.\n */\n interface ClassAttributes extends RefAttributes {\n }\n\n /**\n * Represents a JSX element.\n *\n * Where {@link ReactNode} represents everything that can be rendered, `ReactElement`\n * only represents JSX.\n *\n * @template P The type of the props object\n * @template T The type of the component or tag\n *\n * @example\n *\n * ```tsx\n * const element: ReactElement =
;\n * ```\n */\n interface ReactElement<\n P = any,\n T extends string | JSXElementConstructor = string | JSXElementConstructor,\n > {\n type: T;\n props: P;\n key: string | null;\n }\n\n /**\n * @deprecated\n */\n interface ReactComponentElement<\n T extends keyof JSX.IntrinsicElements | JSXElementConstructor,\n P = Pick, Exclude, \"key\" | \"ref\">>,\n > extends ReactElement> {}\n\n interface FunctionComponentElement

extends ReactElement> {\n ref?: (\"ref\" extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined;\n }\n\n type CElement> = ComponentElement;\n interface ComponentElement> extends ReactElement> {\n ref?: LegacyRef | undefined;\n }\n\n /**\n * @deprecated Use {@link ComponentElement} instead.\n */\n type ClassicElement

= CElement>;\n\n // string fallback for custom web-components\n interface DOMElement

| SVGAttributes, T extends Element>\n extends ReactElement\n {\n ref: LegacyRef;\n }\n\n // ReactHTML for ReactHTMLElement\n interface ReactHTMLElement extends DetailedReactHTMLElement, T> {}\n\n interface DetailedReactHTMLElement

, T extends HTMLElement> extends DOMElement {\n type: keyof ReactHTML;\n }\n\n // ReactSVG for ReactSVGElement\n interface ReactSVGElement extends DOMElement, SVGElement> {\n type: keyof ReactSVG;\n }\n\n interface ReactPortal extends ReactElement {\n children: ReactNode;\n }\n\n //\n // Factories\n // ----------------------------------------------------------------------\n\n /** @deprecated */\n type Factory

= (props?: Attributes & P, ...children: ReactNode[]) => ReactElement

;\n\n /** @deprecated */\n type SFCFactory

= FunctionComponentFactory

;\n\n /** @deprecated */\n type FunctionComponentFactory

= (\n props?: Attributes & P,\n ...children: ReactNode[]\n ) => FunctionComponentElement

;\n\n /** @deprecated */\n type ComponentFactory> = (\n props?: ClassAttributes & P,\n ...children: ReactNode[]\n ) => CElement;\n\n /** @deprecated */\n type CFactory> = ComponentFactory;\n /** @deprecated */\n type ClassicFactory

= CFactory>;\n\n /** @deprecated */\n type DOMFactory

, T extends Element> = (\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]\n ) => DOMElement;\n\n /** @deprecated */\n interface HTMLFactory extends DetailedHTMLFactory, T> {}\n\n /** @deprecated */\n interface DetailedHTMLFactory

, T extends HTMLElement> extends DOMFactory {\n (props?: ClassAttributes & P | null, ...children: ReactNode[]): DetailedReactHTMLElement;\n }\n\n /** @deprecated */\n interface SVGFactory extends DOMFactory, SVGElement> {\n (\n props?: ClassAttributes & SVGAttributes | null,\n ...children: ReactNode[]\n ): ReactSVGElement;\n }\n\n /**\n * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.\n */\n type ReactText = string | number;\n /**\n * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.\n */\n type ReactChild = ReactElement | string | number;\n\n /**\n * @deprecated Use either `ReactNode[]` if you need an array or `Iterable` if its passed to a host component.\n */\n interface ReactNodeArray extends ReadonlyArray {}\n /**\n * WARNING: Not related to `React.Fragment`.\n * @deprecated This type is not relevant when using React. Inline the type instead to make the intent clear.\n */\n type ReactFragment = Iterable;\n\n /**\n * Different release channels declare additional types of ReactNode this particular release channel accepts.\n * App or library types should never augment this interface.\n */\n interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {}\n\n /**\n * Represents all of the things React can render.\n *\n * Where {@link ReactElement} only represents JSX, `ReactNode` represents everything that can be rendered.\n *\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * // Typing children\n * type Props = { children: ReactNode }\n *\n * const Component = ({ children }: Props) =>

{children}
\n *\n * hello\n * ```\n *\n * @example\n *\n * ```tsx\n * // Typing a custom element\n * type Props = { customElement: ReactNode }\n *\n * const Component = ({ customElement }: Props) =>
{customElement}
\n *\n * hello
} />\n * ```\n */\n // non-thenables need to be kept in sync with AwaitedReactNode\n type ReactNode =\n | ReactElement\n | string\n | number\n | Iterable\n | ReactPortal\n | boolean\n | null\n | undefined\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES\n ];\n\n //\n // Top Level API\n // ----------------------------------------------------------------------\n\n // DOM Elements\n /** @deprecated */\n function createFactory(\n type: keyof ReactHTML,\n ): HTMLFactory;\n /** @deprecated */\n function createFactory(\n type: keyof ReactSVG,\n ): SVGFactory;\n /** @deprecated */\n function createFactory

, T extends Element>(\n type: string,\n ): DOMFactory;\n\n // Custom components\n /** @deprecated */\n function createFactory

(type: FunctionComponent

): FunctionComponentFactory

;\n /** @deprecated */\n function createFactory, C extends ComponentClass

>(\n type: ClassType,\n ): CFactory;\n /** @deprecated */\n function createFactory

(type: ComponentClass

): Factory

;\n\n // DOM Elements\n // TODO: generalize this to everything in `keyof ReactHTML`, not just \"input\"\n function createElement(\n type: \"input\",\n props?: InputHTMLAttributes & ClassAttributes | null,\n ...children: ReactNode[]\n ): DetailedReactHTMLElement, HTMLInputElement>;\n function createElement

, T extends HTMLElement>(\n type: keyof ReactHTML,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]\n ): DetailedReactHTMLElement;\n function createElement

, T extends SVGElement>(\n type: keyof ReactSVG,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]\n ): ReactSVGElement;\n function createElement

, T extends Element>(\n type: string,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]\n ): DOMElement;\n\n // Custom components\n\n function createElement

(\n type: FunctionComponent

,\n props?: Attributes & P | null,\n ...children: ReactNode[]\n ): FunctionComponentElement

;\n function createElement

, C extends ComponentClass

>(\n type: ClassType,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]\n ): CElement;\n function createElement

(\n type: FunctionComponent

| ComponentClass

| string,\n props?: Attributes & P | null,\n ...children: ReactNode[]\n ): ReactElement

;\n\n // DOM Elements\n // ReactHTMLElement\n function cloneElement

, T extends HTMLElement>(\n element: DetailedReactHTMLElement,\n props?: P,\n ...children: ReactNode[]\n ): DetailedReactHTMLElement;\n // ReactHTMLElement, less specific\n function cloneElement

, T extends HTMLElement>(\n element: ReactHTMLElement,\n props?: P,\n ...children: ReactNode[]\n ): ReactHTMLElement;\n // SVGElement\n function cloneElement

, T extends SVGElement>(\n element: ReactSVGElement,\n props?: P,\n ...children: ReactNode[]\n ): ReactSVGElement;\n // DOM Element (has to be the last, because type checking stops at first overload that fits)\n function cloneElement

, T extends Element>(\n element: DOMElement,\n props?: DOMAttributes & P,\n ...children: ReactNode[]\n ): DOMElement;\n\n // Custom components\n function cloneElement

(\n element: FunctionComponentElement

,\n props?: Partial

& Attributes,\n ...children: ReactNode[]\n ): FunctionComponentElement

;\n function cloneElement>(\n element: CElement,\n props?: Partial

& ClassAttributes,\n ...children: ReactNode[]\n ): CElement;\n function cloneElement

(\n element: ReactElement

,\n props?: Partial

& Attributes,\n ...children: ReactNode[]\n ): ReactElement

;\n\n /**\n * Describes the props accepted by a Context {@link Provider}.\n *\n * @template T The type of the value the context provides.\n */\n interface ProviderProps {\n value: T;\n children?: ReactNode | undefined;\n }\n\n /**\n * Describes the props accepted by a Context {@link Consumer}.\n *\n * @template T The type of the value the context provides.\n */\n interface ConsumerProps {\n children: (value: T) => ReactNode;\n }\n\n /**\n * An object masquerading as a component. These are created by functions\n * like {@link forwardRef}, {@link memo}, and {@link createContext}.\n *\n * In order to make TypeScript work, we pretend that they are normal\n * components.\n *\n * But they are, in fact, not callable - instead, they are objects which\n * are treated specially by the renderer.\n *\n * @template P The props the component accepts.\n */\n interface ExoticComponent

{\n (props: P): ReactNode;\n readonly $$typeof: symbol;\n }\n\n /**\n * An {@link ExoticComponent} with a `displayName` property applied to it.\n *\n * @template P The props the component accepts.\n */\n interface NamedExoticComponent

extends ExoticComponent

{\n /**\n * Used in debugging messages. You might want to set it\n * explicitly if you want to display a different name for\n * debugging purposes.\n *\n * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}\n */\n displayName?: string | undefined;\n }\n\n /**\n * An {@link ExoticComponent} with a `propTypes` property applied to it.\n *\n * @template P The props the component accepts.\n */\n interface ProviderExoticComponent

extends ExoticComponent

{\n propTypes?: WeakValidationMap

| undefined;\n }\n\n /**\n * Used to retrieve the type of a context object from a {@link Context}.\n *\n * @template C The context object.\n *\n * @example\n *\n * ```tsx\n * import { createContext } from 'react';\n *\n * const MyContext = createContext({ foo: 'bar' });\n *\n * type ContextType = ContextType;\n * // ContextType = { foo: string }\n * ```\n */\n type ContextType> = C extends Context ? T : never;\n\n /**\n * Wraps your components to specify the value of this context for all components inside.\n *\n * @see {@link https://react.dev/reference/react/createContext#provider React Docs}\n *\n * @example\n *\n * ```tsx\n * import { createContext } from 'react';\n *\n * const ThemeContext = createContext('light');\n *\n * function App() {\n * return (\n * \n * \n * \n * );\n * }\n * ```\n */\n type Provider = ProviderExoticComponent>;\n\n /**\n * The old way to read context, before {@link useContext} existed.\n *\n * @see {@link https://react.dev/reference/react/createContext#consumer React Docs}\n *\n * @example\n *\n * ```tsx\n * import { UserContext } from './user-context';\n *\n * function Avatar() {\n * return (\n * \n * {user => {user.name}}\n * \n * );\n * }\n * ```\n */\n type Consumer = ExoticComponent>;\n\n /**\n * Context lets components pass information deep down without explicitly\n * passing props.\n *\n * Created from {@link createContext}\n *\n * @see {@link https://react.dev/learn/passing-data-deeply-with-context React Docs}\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * import { createContext } from 'react';\n *\n * const ThemeContext = createContext('light');\n * ```\n */\n interface Context {\n Provider: Provider;\n Consumer: Consumer;\n /**\n * Used in debugging messages. You might want to set it\n * explicitly if you want to display a different name for\n * debugging purposes.\n *\n * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}\n */\n displayName?: string | undefined;\n }\n\n /**\n * Lets you create a {@link Context} that components can provide or read.\n *\n * @param defaultValue The value you want the context to have when there is no matching\n * {@link Provider} in the tree above the component reading the context. This is meant\n * as a \"last resort\" fallback.\n *\n * @see {@link https://react.dev/reference/react/createContext#reference React Docs}\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * import { createContext } from 'react';\n *\n * const ThemeContext = createContext('light');\n * ```\n */\n function createContext(\n // If you thought this should be optional, see\n // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106\n defaultValue: T,\n ): Context;\n\n function isValidElement

(object: {} | null | undefined): object is ReactElement

;\n\n /**\n * Maintainer's note: Sync with {@link ReactChildren} until {@link ReactChildren} is removed.\n */\n const Children: {\n map(\n children: C | readonly C[],\n fn: (child: C, index: number) => T,\n ): C extends null | undefined ? C : Array>;\n forEach(children: C | readonly C[], fn: (child: C, index: number) => void): void;\n count(children: any): number;\n only(children: C): C extends any[] ? never : C;\n toArray(children: ReactNode | ReactNode[]): Array>;\n };\n /**\n * Lets you group elements without a wrapper node.\n *\n * @see {@link https://react.dev/reference/react/Fragment React Docs}\n *\n * @example\n *\n * ```tsx\n * import { Fragment } from 'react';\n *\n * \n * Hello\n * World\n * \n * ```\n *\n * @example\n *\n * ```tsx\n * // Using the <> shorthand syntax:\n *\n * <>\n * Hello\n * World\n * \n * ```\n */\n const Fragment: ExoticComponent<{ children?: ReactNode | undefined }>;\n\n /**\n * Lets you find common bugs in your components early during development.\n *\n * @see {@link https://react.dev/reference/react/StrictMode React Docs}\n *\n * @example\n *\n * ```tsx\n * import { StrictMode } from 'react';\n *\n * \n * \n * \n * ```\n */\n const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>;\n\n /**\n * The props accepted by {@link Suspense}.\n *\n * @see {@link https://react.dev/reference/react/Suspense React Docs}\n */\n interface SuspenseProps {\n children?: ReactNode | undefined;\n\n /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */\n fallback?: ReactNode;\n\n /**\n * A name for this Suspense boundary for instrumentation purposes.\n * The name will help identify this boundary in React DevTools.\n */\n name?: string | undefined;\n }\n\n /**\n * Lets you display a fallback until its children have finished loading.\n *\n * @see {@link https://react.dev/reference/react/Suspense React Docs}\n *\n * @example\n *\n * ```tsx\n * import { Suspense } from 'react';\n *\n * }>\n * \n * \n * ```\n */\n const Suspense: ExoticComponent;\n const version: string;\n\n /**\n * The callback passed to {@link ProfilerProps.onRender}.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n type ProfilerOnRenderCallback = (\n /**\n * The string id prop of the {@link Profiler} tree that has just committed. This lets\n * you identify which part of the tree was committed if you are using multiple\n * profilers.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n id: string,\n /**\n * This lets you know whether the tree has just been mounted for the first time\n * or re-rendered due to a change in props, state, or hooks.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n phase: \"mount\" | \"update\" | \"nested-update\",\n /**\n * The number of milliseconds spent rendering the {@link Profiler} and its descendants\n * for the current update. This indicates how well the subtree makes use of\n * memoization (e.g. {@link memo} and {@link useMemo}). Ideally this value should decrease\n * significantly after the initial mount as many of the descendants will only need to\n * re-render if their specific props change.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n actualDuration: number,\n /**\n * The number of milliseconds estimating how much time it would take to re-render the entire\n * {@link Profiler} subtree without any optimizations. It is calculated by summing up the most\n * recent render durations of each component in the tree. This value estimates a worst-case\n * cost of rendering (e.g. the initial mount or a tree with no memoization). Compare\n * {@link actualDuration} against it to see if memoization is working.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n baseDuration: number,\n /**\n * A numeric timestamp for when React began rendering the current update.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n startTime: number,\n /**\n * A numeric timestamp for when React committed the current update. This value is shared\n * between all profilers in a commit, enabling them to be grouped if desirable.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n */\n commitTime: number,\n ) => void;\n\n /**\n * The props accepted by {@link Profiler}.\n *\n * @see {@link https://react.dev/reference/react/Profiler React Docs}\n */\n interface ProfilerProps {\n children?: ReactNode | undefined;\n id: string;\n onRender: ProfilerOnRenderCallback;\n }\n\n /**\n * Lets you measure rendering performance of a React tree programmatically.\n *\n * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}\n *\n * @example\n *\n * ```tsx\n * \n * \n * \n * ```\n */\n const Profiler: ExoticComponent;\n\n //\n // Component API\n // ----------------------------------------------------------------------\n\n type ReactInstance = Component | Element;\n\n // Base component for plain JS classes\n interface Component

extends ComponentLifecycle {}\n class Component {\n /**\n * If set, `this.context` will be set at runtime to the current value of the given Context.\n *\n * @example\n *\n * ```ts\n * type MyContext = number\n * const Ctx = React.createContext(0)\n *\n * class Foo extends React.Component {\n * static contextType = Ctx\n * context!: React.ContextType\n * render () {\n * return <>My context's value: {this.context};\n * }\n * }\n * ```\n *\n * @see {@link https://react.dev/reference/react/Component#static-contexttype}\n */\n static contextType?: Context | undefined;\n\n /**\n * If using the new style context, re-declare this in your class to be the\n * `React.ContextType` of your `static contextType`.\n * Should be used with type annotation or static contextType.\n *\n * @example\n * ```ts\n * static contextType = MyContext\n * // For TS pre-3.7:\n * context!: React.ContextType\n * // For TS 3.7 and above:\n * declare context: React.ContextType\n * ```\n *\n * @see {@link https://react.dev/reference/react/Component#context React Docs}\n */\n context: unknown;\n\n constructor(props: P);\n /**\n * @deprecated\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html React Docs}\n */\n constructor(props: P, context: any);\n\n // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.\n // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257\n // Also, the ` | S` allows intellisense to not be dumbisense\n setState(\n state: ((prevState: Readonly, props: Readonly

) => Pick | S | null) | (Pick | S | null),\n callback?: () => void,\n ): void;\n\n forceUpdate(callback?: () => void): void;\n render(): ReactNode;\n\n readonly props: Readonly

;\n state: Readonly;\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs Legacy React Docs}\n */\n refs: {\n [key: string]: ReactInstance;\n };\n }\n\n class PureComponent

extends Component {}\n\n /**\n * @deprecated Use `ClassicComponent` from `create-react-class`\n *\n * @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs}\n * @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm}\n */\n interface ClassicComponent

extends Component {\n replaceState(nextState: S, callback?: () => void): void;\n isMounted(): boolean;\n getInitialState?(): S;\n }\n\n interface ChildContextProvider {\n getChildContext(): CC;\n }\n\n //\n // Class Interfaces\n // ----------------------------------------------------------------------\n\n /**\n * Represents the type of a function component. Can optionally\n * receive a type argument that represents the props the component\n * receives.\n *\n * @template P The props the component accepts.\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}\n * @alias for {@link FunctionComponent}\n *\n * @example\n *\n * ```tsx\n * // With props:\n * type Props = { name: string }\n *\n * const MyComponent: FC = (props) => {\n * return

{props.name}
\n * }\n * ```\n *\n * @example\n *\n * ```tsx\n * // Without props:\n * const MyComponentWithoutProps: FC = () => {\n * return
MyComponentWithoutProps
\n * }\n * ```\n */\n type FC

= FunctionComponent

;\n\n /**\n * Represents the type of a function component. Can optionally\n * receive a type argument that represents the props the component\n * accepts.\n *\n * @template P The props the component accepts.\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * // With props:\n * type Props = { name: string }\n *\n * const MyComponent: FunctionComponent = (props) => {\n * return

{props.name}
\n * }\n * ```\n *\n * @example\n *\n * ```tsx\n * // Without props:\n * const MyComponentWithoutProps: FunctionComponent = () => {\n * return
MyComponentWithoutProps
\n * }\n * ```\n */\n interface FunctionComponent

{\n (\n props: P,\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}\n */\n deprecatedLegacyContext?: any,\n ): ReactNode;\n /**\n * Used to declare the types of the props accepted by the\n * component. These types will be checked during rendering\n * and in development only.\n *\n * We recommend using TypeScript instead of checking prop\n * types at runtime.\n *\n * @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs}\n */\n propTypes?: WeakValidationMap

| undefined;\n /**\n * @deprecated\n *\n * Lets you specify which legacy context is consumed by\n * this component.\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html Legacy React Docs}\n */\n contextTypes?: ValidationMap | undefined;\n /**\n * Used to define default values for the props accepted by\n * the component.\n *\n * @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs}\n *\n * @example\n *\n * ```tsx\n * type Props = { name?: string }\n *\n * const MyComponent: FC = (props) => {\n * return

{props.name}
\n * }\n *\n * MyComponent.defaultProps = {\n * name: 'John Doe'\n * }\n * ```\n *\n * @deprecated Use {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#default_value|default values for destructuring assignments instead}.\n */\n defaultProps?: Partial

| undefined;\n /**\n * Used in debugging messages. You might want to set it\n * explicitly if you want to display a different name for\n * debugging purposes.\n *\n * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}\n *\n * @example\n *\n * ```tsx\n *\n * const MyComponent: FC = () => {\n * return

Hello!
\n * }\n *\n * MyComponent.displayName = 'MyAwesomeComponent'\n * ```\n */\n displayName?: string | undefined;\n }\n\n /**\n * @deprecated - Equivalent to {@link React.FunctionComponent}.\n *\n * @see {@link React.FunctionComponent}\n * @alias {@link VoidFunctionComponent}\n */\n type VFC

= VoidFunctionComponent

;\n\n /**\n * @deprecated - Equivalent to {@link React.FunctionComponent}.\n *\n * @see {@link React.FunctionComponent}\n */\n interface VoidFunctionComponent

{\n (\n props: P,\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}\n */\n deprecatedLegacyContext?: any,\n ): ReactNode;\n propTypes?: WeakValidationMap

| undefined;\n contextTypes?: ValidationMap | undefined;\n /**\n * @deprecated Use {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#default_value|default values for destructuring assignments instead}.\n */\n defaultProps?: Partial

| undefined;\n displayName?: string | undefined;\n }\n\n /**\n * The type of the ref received by a {@link ForwardRefRenderFunction}.\n *\n * @see {@link ForwardRefRenderFunction}\n */\n type ForwardedRef = ((instance: T | null) => void) | MutableRefObject | null;\n\n /**\n * The type of the function passed to {@link forwardRef}. This is considered different\n * to a normal {@link FunctionComponent} because it receives an additional argument,\n *\n * @param props Props passed to the component, if any.\n * @param ref A ref forwarded to the component of type {@link ForwardedRef}.\n *\n * @template T The type of the forwarded ref.\n * @template P The type of the props the component accepts.\n *\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}\n * @see {@link forwardRef}\n */\n interface ForwardRefRenderFunction {\n (props: P, ref: ForwardedRef): ReactNode;\n /**\n * Used in debugging messages. You might want to set it\n * explicitly if you want to display a different name for\n * debugging purposes.\n *\n * Will show `ForwardRef(${Component.displayName || Component.name})`\n * in devtools by default, but can be given its own specific name.\n *\n * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}\n */\n displayName?: string | undefined;\n /**\n * defaultProps are not supported on render functions passed to forwardRef.\n *\n * @see {@link https://github.com/microsoft/TypeScript/issues/36826 linked GitHub issue} for context\n * @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs}\n */\n defaultProps?: never | undefined;\n /**\n * propTypes are not supported on render functions passed to forwardRef.\n *\n * @see {@link https://github.com/microsoft/TypeScript/issues/36826 linked GitHub issue} for context\n * @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs}\n */\n propTypes?: never | undefined;\n }\n\n /**\n * Represents a component class in React.\n *\n * @template P The props the component accepts.\n * @template S The internal state of the component.\n */\n interface ComponentClass

extends StaticLifecycle {\n new(\n props: P,\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs}\n */\n deprecatedLegacyContext?: any,\n ): Component;\n /**\n * Used to declare the types of the props accepted by the\n * component. These types will be checked during rendering\n * and in development only.\n *\n * We recommend using TypeScript instead of checking prop\n * types at runtime.\n *\n * @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs}\n */\n propTypes?: WeakValidationMap

| undefined;\n contextType?: Context | undefined;\n /**\n * @deprecated use {@link ComponentClass.contextType} instead\n *\n * Lets you specify which legacy context is consumed by\n * this component.\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html Legacy React Docs}\n */\n contextTypes?: ValidationMap | undefined;\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#how-to-use-context Legacy React Docs}\n */\n childContextTypes?: ValidationMap | undefined;\n /**\n * Used to define default values for the props accepted by\n * the component.\n *\n * @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs}\n */\n defaultProps?: Partial

| undefined;\n /**\n * Used in debugging messages. You might want to set it\n * explicitly if you want to display a different name for\n * debugging purposes.\n *\n * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}\n */\n displayName?: string | undefined;\n }\n\n /**\n * @deprecated Use `ClassicComponentClass` from `create-react-class`\n *\n * @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs}\n * @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm}\n */\n interface ClassicComponentClass

extends ComponentClass

{\n new(props: P, deprecatedLegacyContext?: any): ClassicComponent;\n getDefaultProps?(): P;\n }\n\n /**\n * Used in {@link createElement} and {@link createFactory} to represent\n * a class.\n *\n * An intersection type is used to infer multiple type parameters from\n * a single argument, which is useful for many top-level API defs.\n * See {@link https://github.com/Microsoft/TypeScript/issues/7234 this GitHub issue}\n * for more info.\n */\n type ClassType, C extends ComponentClass

> =\n & C\n & (new(props: P, deprecatedLegacyContext?: any) => T);\n\n //\n // Component Specs and Lifecycle\n // ----------------------------------------------------------------------\n\n // This should actually be something like `Lifecycle | DeprecatedLifecycle`,\n // as React will _not_ call the deprecated lifecycle methods if any of the new lifecycle\n // methods are present.\n interface ComponentLifecycle extends NewLifecycle, DeprecatedLifecycle {\n /**\n * Called immediately after a component is mounted. Setting state here will trigger re-rendering.\n */\n componentDidMount?(): void;\n /**\n * Called to determine whether the change in props and state should trigger a re-render.\n *\n * `Component` always returns true.\n * `PureComponent` implements a shallow comparison on props and state and returns true if any\n * props or states have changed.\n *\n * If false is returned, {@link Component.render}, `componentWillUpdate`\n * and `componentDidUpdate` will not be called.\n */\n shouldComponentUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): boolean;\n /**\n * Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as\n * cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.\n */\n componentWillUnmount?(): void;\n /**\n * Catches exceptions generated in descendant components. Unhandled exceptions will cause\n * the entire component tree to unmount.\n */\n componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;\n }\n\n // Unfortunately, we have no way of declaring that the component constructor must implement this\n interface StaticLifecycle {\n getDerivedStateFromProps?: GetDerivedStateFromProps | undefined;\n getDerivedStateFromError?: GetDerivedStateFromError | undefined;\n }\n\n type GetDerivedStateFromProps =\n /**\n * Returns an update to a component's state based on its new props and old state.\n *\n * Note: its presence prevents any of the deprecated lifecycle methods from being invoked\n */\n (nextProps: Readonly

, prevState: S) => Partial | null;\n\n type GetDerivedStateFromError =\n /**\n * This lifecycle is invoked after an error has been thrown by a descendant component.\n * It receives the error that was thrown as a parameter and should return a value to update state.\n *\n * Note: its presence prevents any of the deprecated lifecycle methods from being invoked\n */\n (error: any) => Partial | null;\n\n // This should be \"infer SS\" but can't use it yet\n interface NewLifecycle {\n /**\n * Runs before React applies the result of {@link Component.render render} to the document, and\n * returns an object to be given to {@link componentDidUpdate}. Useful for saving\n * things such as scroll position before {@link Component.render render} causes changes to it.\n *\n * Note: the presence of this method prevents any of the deprecated\n * lifecycle events from running.\n */\n getSnapshotBeforeUpdate?(prevProps: Readonly

, prevState: Readonly): SS | null;\n /**\n * Called immediately after updating occurs. Not called for the initial render.\n *\n * The snapshot is only present if {@link getSnapshotBeforeUpdate} is present and returns non-null.\n */\n componentDidUpdate?(prevProps: Readonly

, prevState: Readonly, snapshot?: SS): void;\n }\n\n interface DeprecatedLifecycle {\n /**\n * Called immediately before mounting occurs, and before {@link Component.render}.\n * Avoid introducing any side-effects or subscriptions in this method.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use {@link ComponentLifecycle.componentDidMount componentDidMount} or the constructor instead; will stop working in React 17\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n componentWillMount?(): void;\n /**\n * Called immediately before mounting occurs, and before {@link Component.render}.\n * Avoid introducing any side-effects or subscriptions in this method.\n *\n * This method will not stop working in React 17.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use {@link ComponentLifecycle.componentDidMount componentDidMount} or the constructor instead\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n UNSAFE_componentWillMount?(): void;\n /**\n * Called when the component may be receiving new props.\n * React may call this even if props have not changed, so be sure to compare new and existing\n * props if you only want to handle changes.\n *\n * Calling {@link Component.setState} generally does not trigger this method.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use static {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} instead; will stop working in React 17\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n componentWillReceiveProps?(nextProps: Readonly

, nextContext: any): void;\n /**\n * Called when the component may be receiving new props.\n * React may call this even if props have not changed, so be sure to compare new and existing\n * props if you only want to handle changes.\n *\n * Calling {@link Component.setState} generally does not trigger this method.\n *\n * This method will not stop working in React 17.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use static {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} instead\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n UNSAFE_componentWillReceiveProps?(nextProps: Readonly

, nextContext: any): void;\n /**\n * Called immediately before rendering when new props or state is received. Not called for the initial render.\n *\n * Note: You cannot call {@link Component.setState} here.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n componentWillUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): void;\n /**\n * Called immediately before rendering when new props or state is received. Not called for the initial render.\n *\n * Note: You cannot call {@link Component.setState} here.\n *\n * This method will not stop working in React 17.\n *\n * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate}\n * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents\n * this from being invoked.\n *\n * @deprecated 16.3, use getSnapshotBeforeUpdate instead\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}\n * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}\n */\n UNSAFE_componentWillUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): void;\n }\n\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html Mixins Considered Harmful}\n */\n interface Mixin extends ComponentLifecycle {\n mixins?: Array> | undefined;\n statics?: {\n [key: string]: any;\n } | undefined;\n\n displayName?: string | undefined;\n propTypes?: ValidationMap | undefined;\n contextTypes?: ValidationMap | undefined;\n childContextTypes?: ValidationMap | undefined;\n\n getDefaultProps?(): P;\n getInitialState?(): S;\n }\n\n /**\n * @deprecated\n *\n * @see {@link https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html Mixins Considered Harmful}\n */\n interface ComponentSpec extends Mixin {\n render(): ReactNode;\n\n [propertyName: string]: any;\n }\n\n function createRef(): RefObject;\n\n /**\n * The type of the component returned from {@link forwardRef}.\n *\n * @template P The props the component accepts, if any.\n *\n * @see {@link ExoticComponent}\n */\n interface ForwardRefExoticComponent

extends NamedExoticComponent

{\n /**\n * @deprecated Use {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#default_value|default values for destructuring assignments instead}.\n */\n defaultProps?: Partial

| undefined;\n propTypes?: WeakValidationMap

| undefined;\n }\n\n /**\n * Lets your component expose a DOM node to a parent component\n * using a ref.\n *\n * @see {@link https://react.dev/reference/react/forwardRef React Docs}\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}\n *\n * @param render See the {@link ForwardRefRenderFunction}.\n *\n * @template T The type of the DOM node.\n * @template P The props the component accepts, if any.\n *\n * @example\n *\n * ```tsx\n * interface Props {\n * children?: ReactNode;\n * type: \"submit\" | \"button\";\n * }\n *\n * export const FancyButton = forwardRef((props, ref) => (\n * \n * ));\n * ```\n */\n function forwardRef(\n render: ForwardRefRenderFunction>,\n ): ForwardRefExoticComponent & RefAttributes>;\n\n /**\n * Omits the 'ref' attribute from the given props object.\n *\n * @template P The props object type.\n */\n type PropsWithoutRef

=\n // Omit would not be sufficient for this. We'd like to avoid unnecessary mapping and need a distributive conditional to support unions.\n // see: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types\n // https://github.com/Microsoft/TypeScript/issues/28339\n P extends any ? (\"ref\" extends keyof P ? Omit : P) : P;\n /** Ensures that the props do not include string ref, which cannot be forwarded */\n type PropsWithRef

=\n // Note: String refs can be forwarded. We can't fix this bug without breaking a bunch of libraries now though.\n // Just \"P extends { ref?: infer R }\" looks sufficient, but R will infer as {} if P is {}.\n \"ref\" extends keyof P\n ? P extends { ref?: infer R | undefined }\n ? string extends R ? PropsWithoutRef

& { ref?: Exclude | undefined }\n : P\n : P\n : P;\n\n type PropsWithChildren

= P & { children?: ReactNode | undefined };\n\n /**\n * Used to retrieve the props a component accepts. Can either be passed a string,\n * indicating a DOM element (e.g. 'div', 'span', etc.) or the type of a React\n * component.\n *\n * It's usually better to use {@link ComponentPropsWithRef} or {@link ComponentPropsWithoutRef}\n * instead of this type, as they let you be explicit about whether or not to include\n * the `ref` prop.\n *\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * // Retrieves the props an 'input' element accepts\n * type InputProps = React.ComponentProps<'input'>;\n * ```\n *\n * @example\n *\n * ```tsx\n * const MyComponent = (props: { foo: number, bar: string }) =>

;\n *\n * // Retrieves the props 'MyComponent' accepts\n * type MyComponentProps = React.ComponentProps;\n * ```\n */\n type ComponentProps> = T extends\n JSXElementConstructor ? P\n : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T]\n : {};\n\n /**\n * Used to retrieve the props a component accepts with its ref. Can either be\n * passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the\n * type of a React component.\n *\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * // Retrieves the props an 'input' element accepts\n * type InputProps = React.ComponentPropsWithRef<'input'>;\n * ```\n *\n * @example\n *\n * ```tsx\n * const MyComponent = (props: { foo: number, bar: string }) =>
;\n *\n * // Retrieves the props 'MyComponent' accepts\n * type MyComponentPropsWithRef = React.ComponentPropsWithRef;\n * ```\n */\n type ComponentPropsWithRef = T extends (new(props: infer P) => Component)\n ? PropsWithoutRef

& RefAttributes>\n : PropsWithRef>;\n /**\n * Used to retrieve the props a custom component accepts with its ref.\n *\n * Unlike {@link ComponentPropsWithRef}, this only works with custom\n * components, i.e. components you define yourself. This is to improve\n * type-checking performance.\n *\n * @example\n *\n * ```tsx\n * const MyComponent = (props: { foo: number, bar: string }) =>

;\n *\n * // Retrieves the props 'MyComponent' accepts\n * type MyComponentPropsWithRef = React.CustomComponentPropsWithRef;\n * ```\n */\n type CustomComponentPropsWithRef = T extends (new(props: infer P) => Component)\n ? (PropsWithoutRef

& RefAttributes>)\n : T extends ((props: infer P, legacyContext?: any) => ReactNode) ? PropsWithRef

\n : never;\n\n /**\n * Used to retrieve the props a component accepts without its ref. Can either be\n * passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the\n * type of a React component.\n *\n * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet}\n *\n * @example\n *\n * ```tsx\n * // Retrieves the props an 'input' element accepts\n * type InputProps = React.ComponentPropsWithoutRef<'input'>;\n * ```\n *\n * @example\n *\n * ```tsx\n * const MyComponent = (props: { foo: number, bar: string }) =>

;\n *\n * // Retrieves the props 'MyComponent' accepts\n * type MyComponentPropsWithoutRef = React.ComponentPropsWithoutRef;\n * ```\n */\n type ComponentPropsWithoutRef = PropsWithoutRef>;\n\n type ComponentRef = T extends NamedExoticComponent<\n ComponentPropsWithoutRef & RefAttributes\n > ? Method\n : ComponentPropsWithRef extends RefAttributes ? Method\n : never;\n\n // will show `Memo(${Component.displayName || Component.name})` in devtools by default,\n // but can be given its own specific name\n type MemoExoticComponent> = NamedExoticComponent> & {\n readonly type: T;\n };\n\n /**\n * Lets you skip re-rendering a component when its props are unchanged.\n *\n * @see {@link https://react.dev/reference/react/memo React Docs}\n *\n * @param Component The component to memoize.\n * @param propsAreEqual A function that will be used to determine if the props have changed.\n *\n * @example\n *\n * ```tsx\n * import { memo } from 'react';\n *\n * const SomeComponent = memo(function SomeComponent(props: { foo: string }) {\n * // ...\n * });\n * ```\n */\n function memo

(\n Component: FunctionComponent

,\n propsAreEqual?: (prevProps: Readonly

, nextProps: Readonly

) => boolean,\n ): NamedExoticComponent

;\n function memo>(\n Component: T,\n propsAreEqual?: (prevProps: Readonly>, nextProps: Readonly>) => boolean,\n ): MemoExoticComponent;\n\n interface LazyExoticComponent>\n extends ExoticComponent>\n {\n readonly _result: T;\n }\n\n /**\n * Lets you defer loading a component’s code until it is rendered for the first time.\n *\n * @see {@link https://react.dev/reference/react/lazy React Docs}\n *\n * @param load A function that returns a `Promise` or another thenable (a `Promise`-like object with a\n * then method). React will not call `load` until the first time you attempt to render the returned\n * component. After React first calls load, it will wait for it to resolve, and then render the\n * resolved value’s `.default` as a React component. Both the returned `Promise` and the `Promise`’s\n * resolved value will be cached, so React will not call load more than once. If the `Promise` rejects,\n * React will throw the rejection reason for the nearest Error Boundary to handle.\n *\n * @example\n *\n * ```tsx\n * import { lazy } from 'react';\n *\n * const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));\n * ```\n */\n function lazy>(\n load: () => Promise<{ default: T }>,\n ): LazyExoticComponent;\n\n //\n // React Hooks\n // ----------------------------------------------------------------------\n\n /**\n * The instruction passed to a {@link Dispatch} function in {@link useState}\n * to tell React what the next value of the {@link useState} should be.\n *\n * Often found wrapped in {@link Dispatch}.\n *\n * @template S The type of the state.\n *\n * @example\n *\n * ```tsx\n * // This return type correctly represents the type of\n * // `setCount` in the example below.\n * const useCustomState = (): Dispatch> => {\n * const [count, setCount] = useState(0);\n *\n * return setCount;\n * }\n * ```\n */\n type SetStateAction = S | ((prevState: S) => S);\n\n /**\n * A function that can be used to update the state of a {@link useState}\n * or {@link useReducer} hook.\n */\n type Dispatch = (value: A) => void;\n /**\n * A {@link Dispatch} function can sometimes be called without any arguments.\n */\n type DispatchWithoutAction = () => void;\n // Unlike redux, the actions _can_ be anything\n type Reducer = (prevState: S, action: A) => S;\n // If useReducer accepts a reducer without action, dispatch may be called without any parameters.\n type ReducerWithoutAction = (prevState: S) => S;\n // types used to try and prevent the compiler from reducing S\n // to a supertype common with the second argument to useReducer()\n type ReducerState> = R extends Reducer ? S : never;\n type ReducerAction> = R extends Reducer ? A : never;\n // The identity check is done with the SameValue algorithm (Object.is), which is stricter than ===\n type ReducerStateWithoutAction> = R extends ReducerWithoutAction ? S\n : never;\n type DependencyList = readonly unknown[];\n\n // NOTE: callbacks are _only_ allowed to return either void, or a destructor.\n type EffectCallback = () => void | Destructor;\n\n interface MutableRefObject {\n current: T;\n }\n\n // This will technically work if you give a Consumer or Provider but it's deprecated and warns\n /**\n * Accepts a context object (the value returned from `React.createContext`) and returns the current\n * context value, as given by the nearest context provider for the given context.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useContext}\n */\n function useContext(context: Context /*, (not public API) observedBits?: number|boolean */): T;\n /**\n * Returns a stateful value, and a function to update it.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useState}\n */\n function useState(initialState: S | (() => S)): [S, Dispatch>];\n // convenience overload when first argument is omitted\n /**\n * Returns a stateful value, and a function to update it.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useState}\n */\n function useState(): [S | undefined, Dispatch>];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useReducer}\n */\n // overload where dispatch could accept 0 arguments.\n function useReducer, I>(\n reducer: R,\n initializerArg: I,\n initializer: (arg: I) => ReducerStateWithoutAction,\n ): [ReducerStateWithoutAction, DispatchWithoutAction];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useReducer}\n */\n // overload where dispatch could accept 0 arguments.\n function useReducer>(\n reducer: R,\n initializerArg: ReducerStateWithoutAction,\n initializer?: undefined,\n ): [ReducerStateWithoutAction, DispatchWithoutAction];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useReducer}\n */\n // overload where \"I\" may be a subset of ReducerState; used to provide autocompletion.\n // If \"I\" matches ReducerState exactly then the last overload will allow initializer to be omitted.\n // the last overload effectively behaves as if the identity function (x => x) is the initializer.\n function useReducer, I>(\n reducer: R,\n initializerArg: I & ReducerState,\n initializer: (arg: I & ReducerState) => ReducerState,\n ): [ReducerState, Dispatch>];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useReducer}\n */\n // overload for free \"I\"; all goes as long as initializer converts it into \"ReducerState\".\n function useReducer, I>(\n reducer: R,\n initializerArg: I,\n initializer: (arg: I) => ReducerState,\n ): [ReducerState, Dispatch>];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useReducer}\n */\n\n // I'm not sure if I keep this 2-ary or if I make it (2,3)-ary; it's currently (2,3)-ary.\n // The Flow types do have an overload for 3-ary invocation with undefined initializer.\n\n // NOTE: without the ReducerState indirection, TypeScript would reduce S to be the most common\n // supertype between the reducer's return type and the initialState (or the initializer's return type),\n // which would prevent autocompletion from ever working.\n\n // TODO: double-check if this weird overload logic is necessary. It is possible it's either a bug\n // in older versions, or a regression in newer versions of the typescript completion service.\n function useReducer>(\n reducer: R,\n initialState: ReducerState,\n initializer?: undefined,\n ): [ReducerState, Dispatch>];\n /**\n * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument\n * (`initialValue`). The returned object will persist for the full lifetime of the component.\n *\n * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable\n * value around similar to how you’d use instance fields in classes.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useRef}\n */\n function useRef(initialValue: T): MutableRefObject;\n // convenience overload for refs given as a ref prop as they typically start with a null value\n /**\n * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument\n * (`initialValue`). The returned object will persist for the full lifetime of the component.\n *\n * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable\n * value around similar to how you’d use instance fields in classes.\n *\n * Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type\n * of the generic argument.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useRef}\n */\n function useRef(initialValue: T | null): RefObject;\n // convenience overload for potentially undefined initialValue / call with 0 arguments\n // has a default to stop it from defaulting to {} instead\n /**\n * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument\n * (`initialValue`). The returned object will persist for the full lifetime of the component.\n *\n * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable\n * value around similar to how you’d use instance fields in classes.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useRef}\n */\n function useRef(initialValue?: undefined): MutableRefObject;\n /**\n * The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations.\n * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside\n * `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.\n *\n * Prefer the standard `useEffect` when possible to avoid blocking visual updates.\n *\n * If you’re migrating code from a class component, `useLayoutEffect` fires in the same phase as\n * `componentDidMount` and `componentDidUpdate`.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useLayoutEffect}\n */\n function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;\n /**\n * Accepts a function that contains imperative, possibly effectful code.\n *\n * @param effect Imperative function that can return a cleanup function\n * @param deps If present, effect will only activate if the values in the list change.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useEffect}\n */\n function useEffect(effect: EffectCallback, deps?: DependencyList): void;\n // NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref\n /**\n * `useImperativeHandle` customizes the instance value that is exposed to parent components when using\n * `ref`. As always, imperative code using refs should be avoided in most cases.\n *\n * `useImperativeHandle` should be used with `React.forwardRef`.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useImperativeHandle}\n */\n function useImperativeHandle(ref: Ref | undefined, init: () => R, deps?: DependencyList): void;\n // I made 'inputs' required here and in useMemo as there's no point to memoizing without the memoization key\n // useCallback(X) is identical to just using X, useMemo(() => Y) is identical to just using Y.\n /**\n * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs`\n * has changed.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useCallback}\n */\n // A specific function type would not trigger implicit any.\n // See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/52873#issuecomment-845806435 for a comparison between `Function` and more specific types.\n // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n function useCallback(callback: T, deps: DependencyList): T;\n /**\n * `useMemo` will only recompute the memoized value when one of the `deps` has changed.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useMemo}\n */\n // allow undefined, but don't make it optional as that is very likely a mistake\n function useMemo(factory: () => T, deps: DependencyList): T;\n /**\n * `useDebugValue` can be used to display a label for custom hooks in React DevTools.\n *\n * NOTE: We don’t recommend adding debug values to every custom hook.\n * It’s most valuable for custom hooks that are part of shared libraries.\n *\n * @version 16.8.0\n * @see {@link https://react.dev/reference/react/useDebugValue}\n */\n // the name of the custom hook is itself derived from the function name at runtime:\n // it's just the function name without the \"use\" prefix.\n function useDebugValue(value: T, format?: (value: T) => any): void;\n\n // must be synchronous\n export type TransitionFunction = () => VoidOrUndefinedOnly;\n // strange definition to allow vscode to show documentation on the invocation\n export interface TransitionStartFunction {\n /**\n * State updates caused inside the callback are allowed to be deferred.\n *\n * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**\n *\n * @param callback A _synchronous_ function which causes state updates that can be deferred.\n */\n (callback: TransitionFunction): void;\n }\n\n /**\n * Returns a deferred version of the value that may “lag behind” it.\n *\n * This is commonly used to keep the interface responsive when you have something that renders immediately\n * based on user input and something that needs to wait for a data fetch.\n *\n * A good example of this is a text input.\n *\n * @param value The value that is going to be deferred\n *\n * @see {@link https://react.dev/reference/react/useDeferredValue}\n */\n export function useDeferredValue(value: T): T;\n\n /**\n * Allows components to avoid undesirable loading states by waiting for content to load\n * before transitioning to the next screen. It also allows components to defer slower,\n * data fetching updates until subsequent renders so that more crucial updates can be\n * rendered immediately.\n *\n * The `useTransition` hook returns two values in an array.\n *\n * The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish.\n * The second is a function that takes a callback. We can use it to tell React which state we want to defer.\n *\n * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**\n *\n * @see {@link https://react.dev/reference/react/useTransition}\n */\n export function useTransition(): [boolean, TransitionStartFunction];\n\n /**\n * Similar to `useTransition` but allows uses where hooks are not available.\n *\n * @param callback A _synchronous_ function which causes state updates that can be deferred.\n */\n export function startTransition(scope: TransitionFunction): void;\n\n /**\n * Wrap any code rendering and triggering updates to your components into `act()` calls.\n *\n * Ensures that the behavior in your tests matches what happens in the browser\n * more closely by executing pending `useEffect`s before returning. This also\n * reduces the amount of re-renders done.\n *\n * @param callback A synchronous, void callback that will execute as a single, complete React commit.\n *\n * @see https://reactjs.org/blog/2019/02/06/react-v16.8.0.html#testing-hooks\n */\n // While act does always return Thenable, if a void function is passed, we pretend the return value is also void to not trigger dangling Promise lint rules.\n export function act(callback: () => VoidOrUndefinedOnly): void;\n export function act(callback: () => T | Promise): Promise;\n\n export function useId(): string;\n\n /**\n * @param effect Imperative function that can return a cleanup function\n * @param deps If present, effect will only activate if the values in the list change.\n *\n * @see {@link https://github.com/facebook/react/pull/21913}\n */\n export function useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void;\n\n /**\n * @param subscribe\n * @param getSnapshot\n *\n * @see {@link https://github.com/reactwg/react-18/discussions/86}\n */\n // keep in sync with `useSyncExternalStore` from `use-sync-external-store`\n export function useSyncExternalStore(\n subscribe: (onStoreChange: () => void) => () => void,\n getSnapshot: () => Snapshot,\n getServerSnapshot?: () => Snapshot,\n ): Snapshot;\n\n //\n // Event System\n // ----------------------------------------------------------------------\n // TODO: change any to unknown when moving to TS v3\n interface BaseSyntheticEvent {\n nativeEvent: E;\n currentTarget: C;\n target: T;\n bubbles: boolean;\n cancelable: boolean;\n defaultPrevented: boolean;\n eventPhase: number;\n isTrusted: boolean;\n preventDefault(): void;\n isDefaultPrevented(): boolean;\n stopPropagation(): void;\n isPropagationStopped(): boolean;\n persist(): void;\n timeStamp: number;\n type: string;\n }\n\n /**\n * currentTarget - a reference to the element on which the event listener is registered.\n *\n * target - a reference to the element from which the event was originally dispatched.\n * This might be a child element to the element on which the event listener is registered.\n * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682\n */\n interface SyntheticEvent extends BaseSyntheticEvent {}\n\n interface ClipboardEvent extends SyntheticEvent {\n clipboardData: DataTransfer;\n }\n\n interface CompositionEvent extends SyntheticEvent {\n data: string;\n }\n\n interface DragEvent extends MouseEvent {\n dataTransfer: DataTransfer;\n }\n\n interface PointerEvent extends MouseEvent {\n pointerId: number;\n pressure: number;\n tangentialPressure: number;\n tiltX: number;\n tiltY: number;\n twist: number;\n width: number;\n height: number;\n pointerType: \"mouse\" | \"pen\" | \"touch\";\n isPrimary: boolean;\n }\n\n interface FocusEvent extends SyntheticEvent {\n relatedTarget: (EventTarget & RelatedTarget) | null;\n target: EventTarget & Target;\n }\n\n interface FormEvent extends SyntheticEvent {\n }\n\n interface InvalidEvent extends SyntheticEvent {\n target: EventTarget & T;\n }\n\n interface ChangeEvent extends SyntheticEvent {\n target: EventTarget & T;\n }\n\n interface InputEvent extends SyntheticEvent {\n data: string;\n }\n\n export type ModifierKey =\n | \"Alt\"\n | \"AltGraph\"\n | \"CapsLock\"\n | \"Control\"\n | \"Fn\"\n | \"FnLock\"\n | \"Hyper\"\n | \"Meta\"\n | \"NumLock\"\n | \"ScrollLock\"\n | \"Shift\"\n | \"Super\"\n | \"Symbol\"\n | \"SymbolLock\";\n\n interface KeyboardEvent extends UIEvent {\n altKey: boolean;\n /** @deprecated */\n charCode: number;\n ctrlKey: boolean;\n code: string;\n /**\n * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.\n */\n getModifierState(key: ModifierKey): boolean;\n /**\n * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values\n */\n key: string;\n /** @deprecated */\n keyCode: number;\n locale: string;\n location: number;\n metaKey: boolean;\n repeat: boolean;\n shiftKey: boolean;\n /** @deprecated */\n which: number;\n }\n\n interface MouseEvent extends UIEvent {\n altKey: boolean;\n button: number;\n buttons: number;\n clientX: number;\n clientY: number;\n ctrlKey: boolean;\n /**\n * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.\n */\n getModifierState(key: ModifierKey): boolean;\n metaKey: boolean;\n movementX: number;\n movementY: number;\n pageX: number;\n pageY: number;\n relatedTarget: EventTarget | null;\n screenX: number;\n screenY: number;\n shiftKey: boolean;\n }\n\n interface TouchEvent extends UIEvent {\n altKey: boolean;\n changedTouches: TouchList;\n ctrlKey: boolean;\n /**\n * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.\n */\n getModifierState(key: ModifierKey): boolean;\n metaKey: boolean;\n shiftKey: boolean;\n targetTouches: TouchList;\n touches: TouchList;\n }\n\n interface UIEvent extends SyntheticEvent {\n detail: number;\n view: AbstractView;\n }\n\n interface WheelEvent extends MouseEvent {\n deltaMode: number;\n deltaX: number;\n deltaY: number;\n deltaZ: number;\n }\n\n interface AnimationEvent extends SyntheticEvent {\n animationName: string;\n elapsedTime: number;\n pseudoElement: string;\n }\n\n interface TransitionEvent extends SyntheticEvent {\n elapsedTime: number;\n propertyName: string;\n pseudoElement: string;\n }\n\n //\n // Event Handler Types\n // ----------------------------------------------------------------------\n\n type EventHandler> = { bivarianceHack(event: E): void }[\"bivarianceHack\"];\n\n type ReactEventHandler = EventHandler>;\n\n type ClipboardEventHandler = EventHandler>;\n type CompositionEventHandler = EventHandler>;\n type DragEventHandler = EventHandler>;\n type FocusEventHandler = EventHandler>;\n type FormEventHandler = EventHandler>;\n type ChangeEventHandler = EventHandler>;\n type InputEventHandler = EventHandler>;\n type KeyboardEventHandler = EventHandler>;\n type MouseEventHandler = EventHandler>;\n type TouchEventHandler = EventHandler>;\n type PointerEventHandler = EventHandler>;\n type UIEventHandler = EventHandler>;\n type WheelEventHandler = EventHandler>;\n type AnimationEventHandler = EventHandler>;\n type TransitionEventHandler = EventHandler>;\n\n //\n // Props / DOM Attributes\n // ----------------------------------------------------------------------\n\n interface HTMLProps extends AllHTMLAttributes, ClassAttributes {\n }\n\n type DetailedHTMLProps, T> = ClassAttributes & E;\n\n interface SVGProps extends SVGAttributes, ClassAttributes {\n }\n\n interface SVGLineElementAttributes extends SVGProps {}\n interface SVGTextElementAttributes extends SVGProps {}\n\n interface DOMAttributes {\n children?: ReactNode | undefined;\n dangerouslySetInnerHTML?: {\n // Should be InnerHTML['innerHTML'].\n // But unfortunately we're mixing renderer-specific type declarations.\n __html: string | TrustedHTML;\n } | undefined;\n\n // Clipboard Events\n onCopy?: ClipboardEventHandler | undefined;\n onCopyCapture?: ClipboardEventHandler | undefined;\n onCut?: ClipboardEventHandler | undefined;\n onCutCapture?: ClipboardEventHandler | undefined;\n onPaste?: ClipboardEventHandler | undefined;\n onPasteCapture?: ClipboardEventHandler | undefined;\n\n // Composition Events\n onCompositionEnd?: CompositionEventHandler | undefined;\n onCompositionEndCapture?: CompositionEventHandler | undefined;\n onCompositionStart?: CompositionEventHandler | undefined;\n onCompositionStartCapture?: CompositionEventHandler | undefined;\n onCompositionUpdate?: CompositionEventHandler | undefined;\n onCompositionUpdateCapture?: CompositionEventHandler | undefined;\n\n // Focus Events\n onFocus?: FocusEventHandler | undefined;\n onFocusCapture?: FocusEventHandler | undefined;\n onBlur?: FocusEventHandler | undefined;\n onBlurCapture?: FocusEventHandler | undefined;\n\n // Form Events\n onChange?: FormEventHandler | undefined;\n onChangeCapture?: FormEventHandler | undefined;\n onBeforeInput?: InputEventHandler | undefined;\n onBeforeInputCapture?: FormEventHandler | undefined;\n onInput?: FormEventHandler | undefined;\n onInputCapture?: FormEventHandler | undefined;\n onReset?: FormEventHandler | undefined;\n onResetCapture?: FormEventHandler | undefined;\n onSubmit?: FormEventHandler | undefined;\n onSubmitCapture?: FormEventHandler | undefined;\n onInvalid?: FormEventHandler | undefined;\n onInvalidCapture?: FormEventHandler | undefined;\n\n // Image Events\n onLoad?: ReactEventHandler | undefined;\n onLoadCapture?: ReactEventHandler | undefined;\n onError?: ReactEventHandler | undefined; // also a Media Event\n onErrorCapture?: ReactEventHandler | undefined; // also a Media Event\n\n // Keyboard Events\n onKeyDown?: KeyboardEventHandler | undefined;\n onKeyDownCapture?: KeyboardEventHandler | undefined;\n /** @deprecated Use `onKeyUp` or `onKeyDown` instead */\n onKeyPress?: KeyboardEventHandler | undefined;\n /** @deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead */\n onKeyPressCapture?: KeyboardEventHandler | undefined;\n onKeyUp?: KeyboardEventHandler | undefined;\n onKeyUpCapture?: KeyboardEventHandler | undefined;\n\n // Media Events\n onAbort?: ReactEventHandler | undefined;\n onAbortCapture?: ReactEventHandler | undefined;\n onCanPlay?: ReactEventHandler | undefined;\n onCanPlayCapture?: ReactEventHandler | undefined;\n onCanPlayThrough?: ReactEventHandler | undefined;\n onCanPlayThroughCapture?: ReactEventHandler | undefined;\n onDurationChange?: ReactEventHandler | undefined;\n onDurationChangeCapture?: ReactEventHandler | undefined;\n onEmptied?: ReactEventHandler | undefined;\n onEmptiedCapture?: ReactEventHandler | undefined;\n onEncrypted?: ReactEventHandler | undefined;\n onEncryptedCapture?: ReactEventHandler | undefined;\n onEnded?: ReactEventHandler | undefined;\n onEndedCapture?: ReactEventHandler | undefined;\n onLoadedData?: ReactEventHandler | undefined;\n onLoadedDataCapture?: ReactEventHandler | undefined;\n onLoadedMetadata?: ReactEventHandler | undefined;\n onLoadedMetadataCapture?: ReactEventHandler | undefined;\n onLoadStart?: ReactEventHandler | undefined;\n onLoadStartCapture?: ReactEventHandler | undefined;\n onPause?: ReactEventHandler | undefined;\n onPauseCapture?: ReactEventHandler | undefined;\n onPlay?: ReactEventHandler | undefined;\n onPlayCapture?: ReactEventHandler | undefined;\n onPlaying?: ReactEventHandler | undefined;\n onPlayingCapture?: ReactEventHandler | undefined;\n onProgress?: ReactEventHandler | undefined;\n onProgressCapture?: ReactEventHandler | undefined;\n onRateChange?: ReactEventHandler | undefined;\n onRateChangeCapture?: ReactEventHandler | undefined;\n onSeeked?: ReactEventHandler | undefined;\n onSeekedCapture?: ReactEventHandler | undefined;\n onSeeking?: ReactEventHandler | undefined;\n onSeekingCapture?: ReactEventHandler | undefined;\n onStalled?: ReactEventHandler | undefined;\n onStalledCapture?: ReactEventHandler | undefined;\n onSuspend?: ReactEventHandler | undefined;\n onSuspendCapture?: ReactEventHandler | undefined;\n onTimeUpdate?: ReactEventHandler | undefined;\n onTimeUpdateCapture?: ReactEventHandler | undefined;\n onVolumeChange?: ReactEventHandler | undefined;\n onVolumeChangeCapture?: ReactEventHandler | undefined;\n onWaiting?: ReactEventHandler | undefined;\n onWaitingCapture?: ReactEventHandler | undefined;\n\n // MouseEvents\n onAuxClick?: MouseEventHandler | undefined;\n onAuxClickCapture?: MouseEventHandler | undefined;\n onClick?: MouseEventHandler | undefined;\n onClickCapture?: MouseEventHandler | undefined;\n onContextMenu?: MouseEventHandler | undefined;\n onContextMenuCapture?: MouseEventHandler | undefined;\n onDoubleClick?: MouseEventHandler | undefined;\n onDoubleClickCapture?: MouseEventHandler | undefined;\n onDrag?: DragEventHandler | undefined;\n onDragCapture?: DragEventHandler | undefined;\n onDragEnd?: DragEventHandler | undefined;\n onDragEndCapture?: DragEventHandler | undefined;\n onDragEnter?: DragEventHandler | undefined;\n onDragEnterCapture?: DragEventHandler | undefined;\n onDragExit?: DragEventHandler | undefined;\n onDragExitCapture?: DragEventHandler | undefined;\n onDragLeave?: DragEventHandler | undefined;\n onDragLeaveCapture?: DragEventHandler | undefined;\n onDragOver?: DragEventHandler | undefined;\n onDragOverCapture?: DragEventHandler | undefined;\n onDragStart?: DragEventHandler | undefined;\n onDragStartCapture?: DragEventHandler | undefined;\n onDrop?: DragEventHandler | undefined;\n onDropCapture?: DragEventHandler | undefined;\n onMouseDown?: MouseEventHandler | undefined;\n onMouseDownCapture?: MouseEventHandler | undefined;\n onMouseEnter?: MouseEventHandler | undefined;\n onMouseLeave?: MouseEventHandler | undefined;\n onMouseMove?: MouseEventHandler | undefined;\n onMouseMoveCapture?: MouseEventHandler | undefined;\n onMouseOut?: MouseEventHandler | undefined;\n onMouseOutCapture?: MouseEventHandler | undefined;\n onMouseOver?: MouseEventHandler | undefined;\n onMouseOverCapture?: MouseEventHandler | undefined;\n onMouseUp?: MouseEventHandler | undefined;\n onMouseUpCapture?: MouseEventHandler | undefined;\n\n // Selection Events\n onSelect?: ReactEventHandler | undefined;\n onSelectCapture?: ReactEventHandler | undefined;\n\n // Touch Events\n onTouchCancel?: TouchEventHandler | undefined;\n onTouchCancelCapture?: TouchEventHandler | undefined;\n onTouchEnd?: TouchEventHandler | undefined;\n onTouchEndCapture?: TouchEventHandler | undefined;\n onTouchMove?: TouchEventHandler | undefined;\n onTouchMoveCapture?: TouchEventHandler | undefined;\n onTouchStart?: TouchEventHandler | undefined;\n onTouchStartCapture?: TouchEventHandler | undefined;\n\n // Pointer Events\n onPointerDown?: PointerEventHandler | undefined;\n onPointerDownCapture?: PointerEventHandler | undefined;\n onPointerMove?: PointerEventHandler | undefined;\n onPointerMoveCapture?: PointerEventHandler | undefined;\n onPointerUp?: PointerEventHandler | undefined;\n onPointerUpCapture?: PointerEventHandler | undefined;\n onPointerCancel?: PointerEventHandler | undefined;\n onPointerCancelCapture?: PointerEventHandler | undefined;\n onPointerEnter?: PointerEventHandler | undefined;\n onPointerLeave?: PointerEventHandler | undefined;\n onPointerOver?: PointerEventHandler | undefined;\n onPointerOverCapture?: PointerEventHandler | undefined;\n onPointerOut?: PointerEventHandler | undefined;\n onPointerOutCapture?: PointerEventHandler | undefined;\n onGotPointerCapture?: PointerEventHandler | undefined;\n onGotPointerCaptureCapture?: PointerEventHandler | undefined;\n onLostPointerCapture?: PointerEventHandler | undefined;\n onLostPointerCaptureCapture?: PointerEventHandler | undefined;\n\n // UI Events\n onScroll?: UIEventHandler | undefined;\n onScrollCapture?: UIEventHandler | undefined;\n\n // Wheel Events\n onWheel?: WheelEventHandler | undefined;\n onWheelCapture?: WheelEventHandler | undefined;\n\n // Animation Events\n onAnimationStart?: AnimationEventHandler | undefined;\n onAnimationStartCapture?: AnimationEventHandler | undefined;\n onAnimationEnd?: AnimationEventHandler | undefined;\n onAnimationEndCapture?: AnimationEventHandler | undefined;\n onAnimationIteration?: AnimationEventHandler | undefined;\n onAnimationIterationCapture?: AnimationEventHandler | undefined;\n\n // Transition Events\n onTransitionEnd?: TransitionEventHandler | undefined;\n onTransitionEndCapture?: TransitionEventHandler | undefined;\n }\n\n export interface CSSProperties extends CSS.Properties {\n /**\n * The index signature was removed to enable closed typing for style\n * using CSSType. You're able to use type assertion or module augmentation\n * to add properties or an index signature of your own.\n *\n * For examples and more information, visit:\n * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors\n */\n }\n\n // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/\n interface AriaAttributes {\n /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */\n \"aria-activedescendant\"?: string | undefined;\n /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */\n \"aria-atomic\"?: Booleanish | undefined;\n /**\n * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\n * presented if they are made.\n */\n \"aria-autocomplete\"?: \"none\" | \"inline\" | \"list\" | \"both\" | undefined;\n /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */\n /**\n * Defines a string value that labels the current element, which is intended to be converted into Braille.\n * @see aria-label.\n */\n \"aria-braillelabel\"?: string | undefined;\n /**\n * Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n * @see aria-roledescription.\n */\n \"aria-brailleroledescription\"?: string | undefined;\n \"aria-busy\"?: Booleanish | undefined;\n /**\n * Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n * @see aria-pressed @see aria-selected.\n */\n \"aria-checked\"?: boolean | \"false\" | \"mixed\" | \"true\" | undefined;\n /**\n * Defines the total number of columns in a table, grid, or treegrid.\n * @see aria-colindex.\n */\n \"aria-colcount\"?: number | undefined;\n /**\n * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n * @see aria-colcount @see aria-colspan.\n */\n \"aria-colindex\"?: number | undefined;\n /**\n * Defines a human readable text alternative of aria-colindex.\n * @see aria-rowindextext.\n */\n \"aria-colindextext\"?: string | undefined;\n /**\n * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n * @see aria-colindex @see aria-rowspan.\n */\n \"aria-colspan\"?: number | undefined;\n /**\n * Identifies the element (or elements) whose contents or presence are controlled by the current element.\n * @see aria-owns.\n */\n \"aria-controls\"?: string | undefined;\n /** Indicates the element that represents the current item within a container or set of related elements. */\n \"aria-current\"?: boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\" | undefined;\n /**\n * Identifies the element (or elements) that describes the object.\n * @see aria-labelledby\n */\n \"aria-describedby\"?: string | undefined;\n /**\n * Defines a string value that describes or annotates the current element.\n * @see related aria-describedby.\n */\n \"aria-description\"?: string | undefined;\n /**\n * Identifies the element that provides a detailed, extended description for the object.\n * @see aria-describedby.\n */\n \"aria-details\"?: string | undefined;\n /**\n * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n * @see aria-hidden @see aria-readonly.\n */\n \"aria-disabled\"?: Booleanish | undefined;\n /**\n * Indicates what functions can be performed when a dragged object is released on the drop target.\n * @deprecated in ARIA 1.1\n */\n \"aria-dropeffect\"?: \"none\" | \"copy\" | \"execute\" | \"link\" | \"move\" | \"popup\" | undefined;\n /**\n * Identifies the element that provides an error message for the object.\n * @see aria-invalid @see aria-describedby.\n */\n \"aria-errormessage\"?: string | undefined;\n /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */\n \"aria-expanded\"?: Booleanish | undefined;\n /**\n * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\n * allows assistive technology to override the general default of reading in document source order.\n */\n \"aria-flowto\"?: string | undefined;\n /**\n * Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n * @deprecated in ARIA 1.1\n */\n \"aria-grabbed\"?: Booleanish | undefined;\n /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */\n \"aria-haspopup\"?: boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\" | undefined;\n /**\n * Indicates whether the element is exposed to an accessibility API.\n * @see aria-disabled.\n */\n \"aria-hidden\"?: Booleanish | undefined;\n /**\n * Indicates the entered value does not conform to the format expected by the application.\n * @see aria-errormessage.\n */\n \"aria-invalid\"?: boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\" | undefined;\n /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */\n \"aria-keyshortcuts\"?: string | undefined;\n /**\n * Defines a string value that labels the current element.\n * @see aria-labelledby.\n */\n \"aria-label\"?: string | undefined;\n /**\n * Identifies the element (or elements) that labels the current element.\n * @see aria-describedby.\n */\n \"aria-labelledby\"?: string | undefined;\n /** Defines the hierarchical level of an element within a structure. */\n \"aria-level\"?: number | undefined;\n /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n \"aria-live\"?: \"off\" | \"assertive\" | \"polite\" | undefined;\n /** Indicates whether an element is modal when displayed. */\n \"aria-modal\"?: Booleanish | undefined;\n /** Indicates whether a text box accepts multiple lines of input or only a single line. */\n \"aria-multiline\"?: Booleanish | undefined;\n /** Indicates that the user may select more than one item from the current selectable descendants. */\n \"aria-multiselectable\"?: Booleanish | undefined;\n /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */\n \"aria-orientation\"?: \"horizontal\" | \"vertical\" | undefined;\n /**\n * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\n * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n * @see aria-controls.\n */\n \"aria-owns\"?: string | undefined;\n /**\n * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\n * A hint could be a sample value or a brief description of the expected format.\n */\n \"aria-placeholder\"?: string | undefined;\n /**\n * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n * @see aria-setsize.\n */\n \"aria-posinset\"?: number | undefined;\n /**\n * Indicates the current \"pressed\" state of toggle buttons.\n * @see aria-checked @see aria-selected.\n */\n \"aria-pressed\"?: boolean | \"false\" | \"mixed\" | \"true\" | undefined;\n /**\n * Indicates that the element is not editable, but is otherwise operable.\n * @see aria-disabled.\n */\n \"aria-readonly\"?: Booleanish | undefined;\n /**\n * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n * @see aria-atomic.\n */\n \"aria-relevant\"?:\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text\"\n | \"text additions\"\n | \"text removals\"\n | undefined;\n /** Indicates that user input is required on the element before a form may be submitted. */\n \"aria-required\"?: Booleanish | undefined;\n /** Defines a human-readable, author-localized description for the role of an element. */\n \"aria-roledescription\"?: string | undefined;\n /**\n * Defines the total number of rows in a table, grid, or treegrid.\n * @see aria-rowindex.\n */\n \"aria-rowcount\"?: number | undefined;\n /**\n * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n * @see aria-rowcount @see aria-rowspan.\n */\n \"aria-rowindex\"?: number | undefined;\n /**\n * Defines a human readable text alternative of aria-rowindex.\n * @see aria-colindextext.\n */\n \"aria-rowindextext\"?: string | undefined;\n /**\n * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n * @see aria-rowindex @see aria-colspan.\n */\n \"aria-rowspan\"?: number | undefined;\n /**\n * Indicates the current \"selected\" state of various widgets.\n * @see aria-checked @see aria-pressed.\n */\n \"aria-selected\"?: Booleanish | undefined;\n /**\n * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n * @see aria-posinset.\n */\n \"aria-setsize\"?: number | undefined;\n /** Indicates if items in a table or grid are sorted in ascending or descending order. */\n \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\" | undefined;\n /** Defines the maximum allowed value for a range widget. */\n \"aria-valuemax\"?: number | undefined;\n /** Defines the minimum allowed value for a range widget. */\n \"aria-valuemin\"?: number | undefined;\n /**\n * Defines the current value for a range widget.\n * @see aria-valuetext.\n */\n \"aria-valuenow\"?: number | undefined;\n /** Defines the human readable text alternative of aria-valuenow for a range widget. */\n \"aria-valuetext\"?: string | undefined;\n }\n\n // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions\n type AriaRole =\n | \"alert\"\n | \"alertdialog\"\n | \"application\"\n | \"article\"\n | \"banner\"\n | \"button\"\n | \"cell\"\n | \"checkbox\"\n | \"columnheader\"\n | \"combobox\"\n | \"complementary\"\n | \"contentinfo\"\n | \"definition\"\n | \"dialog\"\n | \"directory\"\n | \"document\"\n | \"feed\"\n | \"figure\"\n | \"form\"\n | \"grid\"\n | \"gridcell\"\n | \"group\"\n | \"heading\"\n | \"img\"\n | \"link\"\n | \"list\"\n | \"listbox\"\n | \"listitem\"\n | \"log\"\n | \"main\"\n | \"marquee\"\n | \"math\"\n | \"menu\"\n | \"menubar\"\n | \"menuitem\"\n | \"menuitemcheckbox\"\n | \"menuitemradio\"\n | \"navigation\"\n | \"none\"\n | \"note\"\n | \"option\"\n | \"presentation\"\n | \"progressbar\"\n | \"radio\"\n | \"radiogroup\"\n | \"region\"\n | \"row\"\n | \"rowgroup\"\n | \"rowheader\"\n | \"scrollbar\"\n | \"search\"\n | \"searchbox\"\n | \"separator\"\n | \"slider\"\n | \"spinbutton\"\n | \"status\"\n | \"switch\"\n | \"tab\"\n | \"table\"\n | \"tablist\"\n | \"tabpanel\"\n | \"term\"\n | \"textbox\"\n | \"timer\"\n | \"toolbar\"\n | \"tooltip\"\n | \"tree\"\n | \"treegrid\"\n | \"treeitem\"\n | (string & {});\n\n interface HTMLAttributes extends AriaAttributes, DOMAttributes {\n // React-specific Attributes\n defaultChecked?: boolean | undefined;\n defaultValue?: string | number | readonly string[] | undefined;\n suppressContentEditableWarning?: boolean | undefined;\n suppressHydrationWarning?: boolean | undefined;\n\n // Standard HTML Attributes\n accessKey?: string | undefined;\n autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | undefined | (string & {});\n autoFocus?: boolean | undefined;\n className?: string | undefined;\n contentEditable?: Booleanish | \"inherit\" | \"plaintext-only\" | undefined;\n contextMenu?: string | undefined;\n dir?: string | undefined;\n draggable?: Booleanish | undefined;\n enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined;\n hidden?: boolean | undefined;\n id?: string | undefined;\n lang?: string | undefined;\n nonce?: string | undefined;\n slot?: string | undefined;\n spellCheck?: Booleanish | undefined;\n style?: CSSProperties | undefined;\n tabIndex?: number | undefined;\n title?: string | undefined;\n translate?: \"yes\" | \"no\" | undefined;\n\n // Unknown\n radioGroup?: string | undefined; // , \n\n // WAI-ARIA\n role?: AriaRole | undefined;\n\n // RDFa Attributes\n about?: string | undefined;\n content?: string | undefined;\n datatype?: string | undefined;\n inlist?: any;\n prefix?: string | undefined;\n property?: string | undefined;\n rel?: string | undefined;\n resource?: string | undefined;\n rev?: string | undefined;\n typeof?: string | undefined;\n vocab?: string | undefined;\n\n // Non-standard Attributes\n autoCorrect?: string | undefined;\n autoSave?: string | undefined;\n color?: string | undefined;\n itemProp?: string | undefined;\n itemScope?: boolean | undefined;\n itemType?: string | undefined;\n itemID?: string | undefined;\n itemRef?: string | undefined;\n results?: number | undefined;\n security?: string | undefined;\n unselectable?: \"on\" | \"off\" | undefined;\n\n // Living Standard\n /**\n * Hints at the type of data that might be entered by the user while editing the element or its contents\n * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}\n */\n inputMode?: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\" | undefined;\n /**\n * Specify that a standard HTML element should behave like a defined custom built-in element\n * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}\n */\n is?: string | undefined;\n /**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}\n */\n exportparts?: string | undefined;\n /**\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}\n */\n part?: string | undefined;\n }\n\n /**\n * For internal usage only.\n * Different release channels declare additional types of ReactNode this particular release channel accepts.\n * App or library types should never augment this interface.\n */\n interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS {}\n\n interface AllHTMLAttributes extends HTMLAttributes {\n // Standard HTML Attributes\n accept?: string | undefined;\n acceptCharset?: string | undefined;\n action?:\n | string\n | undefined\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS\n ];\n allowFullScreen?: boolean | undefined;\n allowTransparency?: boolean | undefined;\n alt?: string | undefined;\n as?: string | undefined;\n async?: boolean | undefined;\n autoComplete?: string | undefined;\n autoPlay?: boolean | undefined;\n capture?: boolean | \"user\" | \"environment\" | undefined;\n cellPadding?: number | string | undefined;\n cellSpacing?: number | string | undefined;\n charSet?: string | undefined;\n challenge?: string | undefined;\n checked?: boolean | undefined;\n cite?: string | undefined;\n classID?: string | undefined;\n cols?: number | undefined;\n colSpan?: number | undefined;\n controls?: boolean | undefined;\n coords?: string | undefined;\n crossOrigin?: CrossOrigin;\n data?: string | undefined;\n dateTime?: string | undefined;\n default?: boolean | undefined;\n defer?: boolean | undefined;\n disabled?: boolean | undefined;\n download?: any;\n encType?: string | undefined;\n form?: string | undefined;\n formAction?:\n | string\n | undefined\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS\n ];\n formEncType?: string | undefined;\n formMethod?: string | undefined;\n formNoValidate?: boolean | undefined;\n formTarget?: string | undefined;\n frameBorder?: number | string | undefined;\n headers?: string | undefined;\n height?: number | string | undefined;\n high?: number | undefined;\n href?: string | undefined;\n hrefLang?: string | undefined;\n htmlFor?: string | undefined;\n httpEquiv?: string | undefined;\n integrity?: string | undefined;\n keyParams?: string | undefined;\n keyType?: string | undefined;\n kind?: string | undefined;\n label?: string | undefined;\n list?: string | undefined;\n loop?: boolean | undefined;\n low?: number | undefined;\n manifest?: string | undefined;\n marginHeight?: number | undefined;\n marginWidth?: number | undefined;\n max?: number | string | undefined;\n maxLength?: number | undefined;\n media?: string | undefined;\n mediaGroup?: string | undefined;\n method?: string | undefined;\n min?: number | string | undefined;\n minLength?: number | undefined;\n multiple?: boolean | undefined;\n muted?: boolean | undefined;\n name?: string | undefined;\n noValidate?: boolean | undefined;\n open?: boolean | undefined;\n optimum?: number | undefined;\n pattern?: string | undefined;\n placeholder?: string | undefined;\n playsInline?: boolean | undefined;\n poster?: string | undefined;\n preload?: string | undefined;\n readOnly?: boolean | undefined;\n required?: boolean | undefined;\n reversed?: boolean | undefined;\n rows?: number | undefined;\n rowSpan?: number | undefined;\n sandbox?: string | undefined;\n scope?: string | undefined;\n scoped?: boolean | undefined;\n scrolling?: string | undefined;\n seamless?: boolean | undefined;\n selected?: boolean | undefined;\n shape?: string | undefined;\n size?: number | undefined;\n sizes?: string | undefined;\n span?: number | undefined;\n src?: string | undefined;\n srcDoc?: string | undefined;\n srcLang?: string | undefined;\n srcSet?: string | undefined;\n start?: number | undefined;\n step?: number | string | undefined;\n summary?: string | undefined;\n target?: string | undefined;\n type?: string | undefined;\n useMap?: string | undefined;\n value?: string | readonly string[] | number | undefined;\n width?: number | string | undefined;\n wmode?: string | undefined;\n wrap?: string | undefined;\n }\n\n type HTMLAttributeReferrerPolicy =\n | \"\"\n | \"no-referrer\"\n | \"no-referrer-when-downgrade\"\n | \"origin\"\n | \"origin-when-cross-origin\"\n | \"same-origin\"\n | \"strict-origin\"\n | \"strict-origin-when-cross-origin\"\n | \"unsafe-url\";\n\n type HTMLAttributeAnchorTarget =\n | \"_self\"\n | \"_blank\"\n | \"_parent\"\n | \"_top\"\n | (string & {});\n\n interface AnchorHTMLAttributes extends HTMLAttributes {\n download?: any;\n href?: string | undefined;\n hrefLang?: string | undefined;\n media?: string | undefined;\n ping?: string | undefined;\n target?: HTMLAttributeAnchorTarget | undefined;\n type?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n }\n\n interface AudioHTMLAttributes extends MediaHTMLAttributes {}\n\n interface AreaHTMLAttributes extends HTMLAttributes {\n alt?: string | undefined;\n coords?: string | undefined;\n download?: any;\n href?: string | undefined;\n hrefLang?: string | undefined;\n media?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n shape?: string | undefined;\n target?: string | undefined;\n }\n\n interface BaseHTMLAttributes extends HTMLAttributes {\n href?: string | undefined;\n target?: string | undefined;\n }\n\n interface BlockquoteHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n }\n\n interface ButtonHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | undefined;\n form?: string | undefined;\n formAction?:\n | string\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS\n ]\n | undefined;\n formEncType?: string | undefined;\n formMethod?: string | undefined;\n formNoValidate?: boolean | undefined;\n formTarget?: string | undefined;\n name?: string | undefined;\n type?: \"submit\" | \"reset\" | \"button\" | undefined;\n value?: string | readonly string[] | number | undefined;\n }\n\n interface CanvasHTMLAttributes extends HTMLAttributes {\n height?: number | string | undefined;\n width?: number | string | undefined;\n }\n\n interface ColHTMLAttributes extends HTMLAttributes {\n span?: number | undefined;\n width?: number | string | undefined;\n }\n\n interface ColgroupHTMLAttributes extends HTMLAttributes {\n span?: number | undefined;\n }\n\n interface DataHTMLAttributes extends HTMLAttributes {\n value?: string | readonly string[] | number | undefined;\n }\n\n interface DetailsHTMLAttributes extends HTMLAttributes {\n open?: boolean | undefined;\n onToggle?: ReactEventHandler | undefined;\n name?: string | undefined;\n }\n\n interface DelHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n dateTime?: string | undefined;\n }\n\n interface DialogHTMLAttributes extends HTMLAttributes {\n closedby?: \"any\" | \"closerequest\" | \"none\" | undefined;\n onCancel?: ReactEventHandler | undefined;\n onClose?: ReactEventHandler | undefined;\n open?: boolean | undefined;\n }\n\n interface EmbedHTMLAttributes extends HTMLAttributes {\n height?: number | string | undefined;\n src?: string | undefined;\n type?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface FieldsetHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | undefined;\n form?: string | undefined;\n name?: string | undefined;\n }\n\n interface FormHTMLAttributes extends HTMLAttributes {\n acceptCharset?: string | undefined;\n action?:\n | string\n | undefined\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS\n ];\n autoComplete?: string | undefined;\n encType?: string | undefined;\n method?: string | undefined;\n name?: string | undefined;\n noValidate?: boolean | undefined;\n target?: string | undefined;\n }\n\n interface HtmlHTMLAttributes extends HTMLAttributes {\n manifest?: string | undefined;\n }\n\n interface IframeHTMLAttributes extends HTMLAttributes {\n allow?: string | undefined;\n allowFullScreen?: boolean | undefined;\n allowTransparency?: boolean | undefined;\n /** @deprecated */\n frameBorder?: number | string | undefined;\n height?: number | string | undefined;\n loading?: \"eager\" | \"lazy\" | undefined;\n /** @deprecated */\n marginHeight?: number | undefined;\n /** @deprecated */\n marginWidth?: number | undefined;\n name?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n sandbox?: string | undefined;\n /** @deprecated */\n scrolling?: string | undefined;\n seamless?: boolean | undefined;\n src?: string | undefined;\n srcDoc?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface ImgHTMLAttributes extends HTMLAttributes {\n alt?: string | undefined;\n crossOrigin?: CrossOrigin;\n decoding?: \"async\" | \"auto\" | \"sync\" | undefined;\n fetchPriority?: \"high\" | \"low\" | \"auto\";\n height?: number | string | undefined;\n loading?: \"eager\" | \"lazy\" | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n sizes?: string | undefined;\n src?: string | undefined;\n srcSet?: string | undefined;\n useMap?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface InsHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n dateTime?: string | undefined;\n }\n\n type HTMLInputTypeAttribute =\n | \"button\"\n | \"checkbox\"\n | \"color\"\n | \"date\"\n | \"datetime-local\"\n | \"email\"\n | \"file\"\n | \"hidden\"\n | \"image\"\n | \"month\"\n | \"number\"\n | \"password\"\n | \"radio\"\n | \"range\"\n | \"reset\"\n | \"search\"\n | \"submit\"\n | \"tel\"\n | \"text\"\n | \"time\"\n | \"url\"\n | \"week\"\n | (string & {});\n\n type AutoFillAddressKind = \"billing\" | \"shipping\";\n type AutoFillBase = \"\" | \"off\" | \"on\";\n type AutoFillContactField =\n | \"email\"\n | \"tel\"\n | \"tel-area-code\"\n | \"tel-country-code\"\n | \"tel-extension\"\n | \"tel-local\"\n | \"tel-local-prefix\"\n | \"tel-local-suffix\"\n | \"tel-national\";\n type AutoFillContactKind = \"home\" | \"mobile\" | \"work\";\n type AutoFillCredentialField = \"webauthn\";\n type AutoFillNormalField =\n | \"additional-name\"\n | \"address-level1\"\n | \"address-level2\"\n | \"address-level3\"\n | \"address-level4\"\n | \"address-line1\"\n | \"address-line2\"\n | \"address-line3\"\n | \"bday-day\"\n | \"bday-month\"\n | \"bday-year\"\n | \"cc-csc\"\n | \"cc-exp\"\n | \"cc-exp-month\"\n | \"cc-exp-year\"\n | \"cc-family-name\"\n | \"cc-given-name\"\n | \"cc-name\"\n | \"cc-number\"\n | \"cc-type\"\n | \"country\"\n | \"country-name\"\n | \"current-password\"\n | \"family-name\"\n | \"given-name\"\n | \"honorific-prefix\"\n | \"honorific-suffix\"\n | \"name\"\n | \"new-password\"\n | \"one-time-code\"\n | \"organization\"\n | \"postal-code\"\n | \"street-address\"\n | \"transaction-amount\"\n | \"transaction-currency\"\n | \"username\";\n type OptionalPrefixToken = `${T} ` | \"\";\n type OptionalPostfixToken = ` ${T}` | \"\";\n type AutoFillField = AutoFillNormalField | `${OptionalPrefixToken}${AutoFillContactField}`;\n type AutoFillSection = `section-${string}`;\n type AutoFill =\n | AutoFillBase\n | `${OptionalPrefixToken}${OptionalPrefixToken<\n AutoFillAddressKind\n >}${AutoFillField}${OptionalPostfixToken}`;\n type HTMLInputAutoCompleteAttribute = AutoFill | (string & {});\n\n interface InputHTMLAttributes extends HTMLAttributes {\n accept?: string | undefined;\n alt?: string | undefined;\n autoComplete?: HTMLInputAutoCompleteAttribute | undefined;\n capture?: boolean | \"user\" | \"environment\" | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute\n checked?: boolean | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n formAction?:\n | string\n | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[\n keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS\n ]\n | undefined;\n formEncType?: string | undefined;\n formMethod?: string | undefined;\n formNoValidate?: boolean | undefined;\n formTarget?: string | undefined;\n height?: number | string | undefined;\n list?: string | undefined;\n max?: number | string | undefined;\n maxLength?: number | undefined;\n min?: number | string | undefined;\n minLength?: number | undefined;\n multiple?: boolean | undefined;\n name?: string | undefined;\n pattern?: string | undefined;\n placeholder?: string | undefined;\n readOnly?: boolean | undefined;\n required?: boolean | undefined;\n size?: number | undefined;\n src?: string | undefined;\n step?: number | string | undefined;\n type?: HTMLInputTypeAttribute | undefined;\n value?: string | readonly string[] | number | undefined;\n width?: number | string | undefined;\n\n onChange?: ChangeEventHandler | undefined;\n }\n\n interface KeygenHTMLAttributes extends HTMLAttributes {\n challenge?: string | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n keyType?: string | undefined;\n keyParams?: string | undefined;\n name?: string | undefined;\n }\n\n interface LabelHTMLAttributes extends HTMLAttributes {\n form?: string | undefined;\n htmlFor?: string | undefined;\n }\n\n interface LiHTMLAttributes extends HTMLAttributes {\n value?: string | readonly string[] | number | undefined;\n }\n\n interface LinkHTMLAttributes extends HTMLAttributes {\n as?: string | undefined;\n blocking?: \"render\" | (string & {}) | undefined;\n crossOrigin?: CrossOrigin;\n fetchPriority?: \"high\" | \"low\" | \"auto\";\n href?: string | undefined;\n hrefLang?: string | undefined;\n integrity?: string | undefined;\n media?: string | undefined;\n imageSrcSet?: string | undefined;\n imageSizes?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n sizes?: string | undefined;\n type?: string | undefined;\n charSet?: string | undefined;\n }\n\n interface MapHTMLAttributes extends HTMLAttributes {\n name?: string | undefined;\n }\n\n interface MenuHTMLAttributes extends HTMLAttributes {\n type?: string | undefined;\n }\n\n interface MediaHTMLAttributes extends HTMLAttributes {\n autoPlay?: boolean | undefined;\n controls?: boolean | undefined;\n controlsList?: string | undefined;\n crossOrigin?: CrossOrigin;\n loop?: boolean | undefined;\n mediaGroup?: string | undefined;\n muted?: boolean | undefined;\n playsInline?: boolean | undefined;\n preload?: string | undefined;\n src?: string | undefined;\n }\n\n interface MetaHTMLAttributes extends HTMLAttributes {\n charSet?: string | undefined;\n content?: string | undefined;\n httpEquiv?: string | undefined;\n media?: string | undefined;\n name?: string | undefined;\n }\n\n interface MeterHTMLAttributes extends HTMLAttributes {\n form?: string | undefined;\n high?: number | undefined;\n low?: number | undefined;\n max?: number | string | undefined;\n min?: number | string | undefined;\n optimum?: number | undefined;\n value?: string | readonly string[] | number | undefined;\n }\n\n interface QuoteHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n }\n\n interface ObjectHTMLAttributes extends HTMLAttributes {\n classID?: string | undefined;\n data?: string | undefined;\n form?: string | undefined;\n height?: number | string | undefined;\n name?: string | undefined;\n type?: string | undefined;\n useMap?: string | undefined;\n width?: number | string | undefined;\n wmode?: string | undefined;\n }\n\n interface OlHTMLAttributes extends HTMLAttributes {\n reversed?: boolean | undefined;\n start?: number | undefined;\n type?: \"1\" | \"a\" | \"A\" | \"i\" | \"I\" | undefined;\n }\n\n interface OptgroupHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | undefined;\n label?: string | undefined;\n }\n\n interface OptionHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | undefined;\n label?: string | undefined;\n selected?: boolean | undefined;\n value?: string | readonly string[] | number | undefined;\n }\n\n interface OutputHTMLAttributes extends HTMLAttributes {\n form?: string | undefined;\n htmlFor?: string | undefined;\n name?: string | undefined;\n }\n\n interface ParamHTMLAttributes extends HTMLAttributes {\n name?: string | undefined;\n value?: string | readonly string[] | number | undefined;\n }\n\n interface ProgressHTMLAttributes extends HTMLAttributes {\n max?: number | string | undefined;\n value?: string | readonly string[] | number | undefined;\n }\n\n interface SlotHTMLAttributes extends HTMLAttributes {\n name?: string | undefined;\n }\n\n interface ScriptHTMLAttributes extends HTMLAttributes {\n async?: boolean | undefined;\n blocking?: \"render\" | (string & {}) | undefined;\n /** @deprecated */\n charSet?: string | undefined;\n crossOrigin?: CrossOrigin;\n defer?: boolean | undefined;\n integrity?: string | undefined;\n noModule?: boolean | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n src?: string | undefined;\n type?: string | undefined;\n }\n\n interface SelectHTMLAttributes extends HTMLAttributes {\n autoComplete?: string | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n multiple?: boolean | undefined;\n name?: string | undefined;\n required?: boolean | undefined;\n size?: number | undefined;\n value?: string | readonly string[] | number | undefined;\n onChange?: ChangeEventHandler | undefined;\n }\n\n interface SourceHTMLAttributes extends HTMLAttributes {\n height?: number | string | undefined;\n media?: string | undefined;\n sizes?: string | undefined;\n src?: string | undefined;\n srcSet?: string | undefined;\n type?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface StyleHTMLAttributes extends HTMLAttributes {\n blocking?: \"render\" | (string & {}) | undefined;\n media?: string | undefined;\n scoped?: boolean | undefined;\n type?: string | undefined;\n }\n\n interface TableHTMLAttributes extends HTMLAttributes {\n align?: \"left\" | \"center\" | \"right\" | undefined;\n bgcolor?: string | undefined;\n border?: number | undefined;\n cellPadding?: number | string | undefined;\n cellSpacing?: number | string | undefined;\n frame?: boolean | undefined;\n rules?: \"none\" | \"groups\" | \"rows\" | \"columns\" | \"all\" | undefined;\n summary?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface TextareaHTMLAttributes extends HTMLAttributes {\n autoComplete?: string | undefined;\n cols?: number | undefined;\n dirName?: string | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n maxLength?: number | undefined;\n minLength?: number | undefined;\n name?: string | undefined;\n placeholder?: string | undefined;\n readOnly?: boolean | undefined;\n required?: boolean | undefined;\n rows?: number | undefined;\n value?: string | readonly string[] | number | undefined;\n wrap?: string | undefined;\n\n onChange?: ChangeEventHandler | undefined;\n }\n\n interface TdHTMLAttributes extends HTMLAttributes {\n align?: \"left\" | \"center\" | \"right\" | \"justify\" | \"char\" | undefined;\n colSpan?: number | undefined;\n headers?: string | undefined;\n rowSpan?: number | undefined;\n scope?: string | undefined;\n abbr?: string | undefined;\n height?: number | string | undefined;\n width?: number | string | undefined;\n valign?: \"top\" | \"middle\" | \"bottom\" | \"baseline\" | undefined;\n }\n\n interface ThHTMLAttributes extends HTMLAttributes {\n align?: \"left\" | \"center\" | \"right\" | \"justify\" | \"char\" | undefined;\n colSpan?: number | undefined;\n headers?: string | undefined;\n rowSpan?: number | undefined;\n scope?: string | undefined;\n abbr?: string | undefined;\n }\n\n interface TimeHTMLAttributes extends HTMLAttributes {\n dateTime?: string | undefined;\n }\n\n interface TrackHTMLAttributes extends HTMLAttributes {\n default?: boolean | undefined;\n kind?: string | undefined;\n label?: string | undefined;\n src?: string | undefined;\n srcLang?: string | undefined;\n }\n\n interface VideoHTMLAttributes extends MediaHTMLAttributes {\n height?: number | string | undefined;\n playsInline?: boolean | undefined;\n poster?: string | undefined;\n width?: number | string | undefined;\n disablePictureInPicture?: boolean | undefined;\n disableRemotePlayback?: boolean | undefined;\n\n onResize?: ReactEventHandler | undefined;\n onResizeCapture?: ReactEventHandler | undefined;\n }\n\n // this list is \"complete\" in that it contains every SVG attribute\n // that React supports, but the types can be improved.\n // Full list here: https://facebook.github.io/react/docs/dom-elements.html\n //\n // The three broad type categories are (in order of restrictiveness):\n // - \"number | string\"\n // - \"string\"\n // - union of string literals\n interface SVGAttributes extends AriaAttributes, DOMAttributes {\n // React-specific Attributes\n suppressHydrationWarning?: boolean | undefined;\n\n // Attributes which also defined in HTMLAttributes\n // See comment in SVGDOMPropertyConfig.js\n className?: string | undefined;\n color?: string | undefined;\n height?: number | string | undefined;\n id?: string | undefined;\n lang?: string | undefined;\n max?: number | string | undefined;\n media?: string | undefined;\n method?: string | undefined;\n min?: number | string | undefined;\n name?: string | undefined;\n style?: CSSProperties | undefined;\n target?: string | undefined;\n type?: string | undefined;\n width?: number | string | undefined;\n\n // Other HTML properties supported by SVG elements in browsers\n role?: AriaRole | undefined;\n tabIndex?: number | undefined;\n crossOrigin?: CrossOrigin;\n\n // SVG Specific attributes\n accentHeight?: number | string | undefined;\n accumulate?: \"none\" | \"sum\" | undefined;\n additive?: \"replace\" | \"sum\" | undefined;\n alignmentBaseline?:\n | \"auto\"\n | \"baseline\"\n | \"before-edge\"\n | \"text-before-edge\"\n | \"middle\"\n | \"central\"\n | \"after-edge\"\n | \"text-after-edge\"\n | \"ideographic\"\n | \"alphabetic\"\n | \"hanging\"\n | \"mathematical\"\n | \"inherit\"\n | undefined;\n allowReorder?: \"no\" | \"yes\" | undefined;\n alphabetic?: number | string | undefined;\n amplitude?: number | string | undefined;\n arabicForm?: \"initial\" | \"medial\" | \"terminal\" | \"isolated\" | undefined;\n ascent?: number | string | undefined;\n attributeName?: string | undefined;\n attributeType?: string | undefined;\n autoReverse?: Booleanish | undefined;\n azimuth?: number | string | undefined;\n baseFrequency?: number | string | undefined;\n baselineShift?: number | string | undefined;\n baseProfile?: number | string | undefined;\n bbox?: number | string | undefined;\n begin?: number | string | undefined;\n bias?: number | string | undefined;\n by?: number | string | undefined;\n calcMode?: number | string | undefined;\n capHeight?: number | string | undefined;\n clip?: number | string | undefined;\n clipPath?: string | undefined;\n clipPathUnits?: number | string | undefined;\n clipRule?: number | string | undefined;\n colorInterpolation?: number | string | undefined;\n colorInterpolationFilters?: \"auto\" | \"sRGB\" | \"linearRGB\" | \"inherit\" | undefined;\n colorProfile?: number | string | undefined;\n colorRendering?: number | string | undefined;\n contentScriptType?: number | string | undefined;\n contentStyleType?: number | string | undefined;\n cursor?: number | string | undefined;\n cx?: number | string | undefined;\n cy?: number | string | undefined;\n d?: string | undefined;\n decelerate?: number | string | undefined;\n descent?: number | string | undefined;\n diffuseConstant?: number | string | undefined;\n direction?: number | string | undefined;\n display?: number | string | undefined;\n divisor?: number | string | undefined;\n dominantBaseline?:\n | \"auto\"\n | \"use-script\"\n | \"no-change\"\n | \"reset-size\"\n | \"ideographic\"\n | \"alphabetic\"\n | \"hanging\"\n | \"mathematical\"\n | \"central\"\n | \"middle\"\n | \"text-after-edge\"\n | \"text-before-edge\"\n | \"inherit\"\n | undefined;\n dur?: number | string | undefined;\n dx?: number | string | undefined;\n dy?: number | string | undefined;\n edgeMode?: number | string | undefined;\n elevation?: number | string | undefined;\n enableBackground?: number | string | undefined;\n end?: number | string | undefined;\n exponent?: number | string | undefined;\n externalResourcesRequired?: Booleanish | undefined;\n fill?: string | undefined;\n fillOpacity?: number | string | undefined;\n fillRule?: \"nonzero\" | \"evenodd\" | \"inherit\" | undefined;\n filter?: string | undefined;\n filterRes?: number | string | undefined;\n filterUnits?: number | string | undefined;\n floodColor?: number | string | undefined;\n floodOpacity?: number | string | undefined;\n focusable?: Booleanish | \"auto\" | undefined;\n fontFamily?: string | undefined;\n fontSize?: number | string | undefined;\n fontSizeAdjust?: number | string | undefined;\n fontStretch?: number | string | undefined;\n fontStyle?: number | string | undefined;\n fontVariant?: number | string | undefined;\n fontWeight?: number | string | undefined;\n format?: number | string | undefined;\n fr?: number | string | undefined;\n from?: number | string | undefined;\n fx?: number | string | undefined;\n fy?: number | string | undefined;\n g1?: number | string | undefined;\n g2?: number | string | undefined;\n glyphName?: number | string | undefined;\n glyphOrientationHorizontal?: number | string | undefined;\n glyphOrientationVertical?: number | string | undefined;\n glyphRef?: number | string | undefined;\n gradientTransform?: string | undefined;\n gradientUnits?: string | undefined;\n hanging?: number | string | undefined;\n horizAdvX?: number | string | undefined;\n horizOriginX?: number | string | undefined;\n href?: string | undefined;\n ideographic?: number | string | undefined;\n imageRendering?: number | string | undefined;\n in2?: number | string | undefined;\n in?: string | undefined;\n intercept?: number | string | undefined;\n k1?: number | string | undefined;\n k2?: number | string | undefined;\n k3?: number | string | undefined;\n k4?: number | string | undefined;\n k?: number | string | undefined;\n kernelMatrix?: number | string | undefined;\n kernelUnitLength?: number | string | undefined;\n kerning?: number | string | undefined;\n keyPoints?: number | string | undefined;\n keySplines?: number | string | undefined;\n keyTimes?: number | string | undefined;\n lengthAdjust?: number | string | undefined;\n letterSpacing?: number | string | undefined;\n lightingColor?: number | string | undefined;\n limitingConeAngle?: number | string | undefined;\n local?: number | string | undefined;\n markerEnd?: string | undefined;\n markerHeight?: number | string | undefined;\n markerMid?: string | undefined;\n markerStart?: string | undefined;\n markerUnits?: number | string | undefined;\n markerWidth?: number | string | undefined;\n mask?: string | undefined;\n maskContentUnits?: number | string | undefined;\n maskUnits?: number | string | undefined;\n mathematical?: number | string | undefined;\n mode?: number | string | undefined;\n numOctaves?: number | string | undefined;\n offset?: number | string | undefined;\n opacity?: number | string | undefined;\n operator?: number | string | undefined;\n order?: number | string | undefined;\n orient?: number | string | undefined;\n orientation?: number | string | undefined;\n origin?: number | string | undefined;\n overflow?: number | string | undefined;\n overlinePosition?: number | string | undefined;\n overlineThickness?: number | string | undefined;\n paintOrder?: number | string | undefined;\n panose1?: number | string | undefined;\n path?: string | undefined;\n pathLength?: number | string | undefined;\n patternContentUnits?: string | undefined;\n patternTransform?: number | string | undefined;\n patternUnits?: string | undefined;\n pointerEvents?: number | string | undefined;\n points?: string | undefined;\n pointsAtX?: number | string | undefined;\n pointsAtY?: number | string | undefined;\n pointsAtZ?: number | string | undefined;\n preserveAlpha?: Booleanish | undefined;\n preserveAspectRatio?: string | undefined;\n primitiveUnits?: number | string | undefined;\n r?: number | string | undefined;\n radius?: number | string | undefined;\n refX?: number | string | undefined;\n refY?: number | string | undefined;\n renderingIntent?: number | string | undefined;\n repeatCount?: number | string | undefined;\n repeatDur?: number | string | undefined;\n requiredExtensions?: number | string | undefined;\n requiredFeatures?: number | string | undefined;\n restart?: number | string | undefined;\n result?: string | undefined;\n rotate?: number | string | undefined;\n rx?: number | string | undefined;\n ry?: number | string | undefined;\n scale?: number | string | undefined;\n seed?: number | string | undefined;\n shapeRendering?: number | string | undefined;\n slope?: number | string | undefined;\n spacing?: number | string | undefined;\n specularConstant?: number | string | undefined;\n specularExponent?: number | string | undefined;\n speed?: number | string | undefined;\n spreadMethod?: string | undefined;\n startOffset?: number | string | undefined;\n stdDeviation?: number | string | undefined;\n stemh?: number | string | undefined;\n stemv?: number | string | undefined;\n stitchTiles?: number | string | undefined;\n stopColor?: string | undefined;\n stopOpacity?: number | string | undefined;\n strikethroughPosition?: number | string | undefined;\n strikethroughThickness?: number | string | undefined;\n string?: number | string | undefined;\n stroke?: string | undefined;\n strokeDasharray?: string | number | undefined;\n strokeDashoffset?: string | number | undefined;\n strokeLinecap?: \"butt\" | \"round\" | \"square\" | \"inherit\" | undefined;\n strokeLinejoin?: \"miter\" | \"round\" | \"bevel\" | \"inherit\" | undefined;\n strokeMiterlimit?: number | string | undefined;\n strokeOpacity?: number | string | undefined;\n strokeWidth?: number | string | undefined;\n surfaceScale?: number | string | undefined;\n systemLanguage?: number | string | undefined;\n tableValues?: number | string | undefined;\n targetX?: number | string | undefined;\n targetY?: number | string | undefined;\n textAnchor?: \"start\" | \"middle\" | \"end\" | \"inherit\" | undefined;\n textDecoration?: number | string | undefined;\n textLength?: number | string | undefined;\n textRendering?: number | string | undefined;\n to?: number | string | undefined;\n transform?: string | undefined;\n transformOrigin?: string | undefined;\n u1?: number | string | undefined;\n u2?: number | string | undefined;\n underlinePosition?: number | string | undefined;\n underlineThickness?: number | string | undefined;\n unicode?: number | string | undefined;\n unicodeBidi?: number | string | undefined;\n unicodeRange?: number | string | undefined;\n unitsPerEm?: number | string | undefined;\n vAlphabetic?: number | string | undefined;\n values?: string | undefined;\n vectorEffect?: number | string | undefined;\n version?: string | undefined;\n vertAdvY?: number | string | undefined;\n vertOriginX?: number | string | undefined;\n vertOriginY?: number | string | undefined;\n vHanging?: number | string | undefined;\n vIdeographic?: number | string | undefined;\n viewBox?: string | undefined;\n viewTarget?: number | string | undefined;\n visibility?: number | string | undefined;\n vMathematical?: number | string | undefined;\n widths?: number | string | undefined;\n wordSpacing?: number | string | undefined;\n writingMode?: number | string | undefined;\n x1?: number | string | undefined;\n x2?: number | string | undefined;\n x?: number | string | undefined;\n xChannelSelector?: string | undefined;\n xHeight?: number | string | undefined;\n xlinkActuate?: string | undefined;\n xlinkArcrole?: string | undefined;\n xlinkHref?: string | undefined;\n xlinkRole?: string | undefined;\n xlinkShow?: string | undefined;\n xlinkTitle?: string | undefined;\n xlinkType?: string | undefined;\n xmlBase?: string | undefined;\n xmlLang?: string | undefined;\n xmlns?: string | undefined;\n xmlnsXlink?: string | undefined;\n xmlSpace?: string | undefined;\n y1?: number | string | undefined;\n y2?: number | string | undefined;\n y?: number | string | undefined;\n yChannelSelector?: string | undefined;\n z?: number | string | undefined;\n zoomAndPan?: string | undefined;\n }\n\n interface WebViewHTMLAttributes extends HTMLAttributes {\n allowFullScreen?: boolean | undefined;\n allowpopups?: boolean | undefined;\n autosize?: boolean | undefined;\n blinkfeatures?: string | undefined;\n disableblinkfeatures?: string | undefined;\n disableguestresize?: boolean | undefined;\n disablewebsecurity?: boolean | undefined;\n guestinstance?: string | undefined;\n httpreferrer?: string | undefined;\n nodeintegration?: boolean | undefined;\n partition?: string | undefined;\n plugins?: boolean | undefined;\n preload?: string | undefined;\n src?: string | undefined;\n useragent?: string | undefined;\n webpreferences?: string | undefined;\n }\n\n //\n // React.DOM\n // ----------------------------------------------------------------------\n\n /* deprecated */\n interface ReactHTML {\n a: DetailedHTMLFactory, HTMLAnchorElement>;\n abbr: DetailedHTMLFactory, HTMLElement>;\n address: DetailedHTMLFactory, HTMLElement>;\n area: DetailedHTMLFactory, HTMLAreaElement>;\n article: DetailedHTMLFactory, HTMLElement>;\n aside: DetailedHTMLFactory, HTMLElement>;\n audio: DetailedHTMLFactory, HTMLAudioElement>;\n b: DetailedHTMLFactory, HTMLElement>;\n base: DetailedHTMLFactory, HTMLBaseElement>;\n bdi: DetailedHTMLFactory, HTMLElement>;\n bdo: DetailedHTMLFactory, HTMLElement>;\n big: DetailedHTMLFactory, HTMLElement>;\n blockquote: DetailedHTMLFactory, HTMLQuoteElement>;\n body: DetailedHTMLFactory, HTMLBodyElement>;\n br: DetailedHTMLFactory, HTMLBRElement>;\n button: DetailedHTMLFactory, HTMLButtonElement>;\n canvas: DetailedHTMLFactory, HTMLCanvasElement>;\n caption: DetailedHTMLFactory, HTMLElement>;\n center: DetailedHTMLFactory, HTMLElement>;\n cite: DetailedHTMLFactory, HTMLElement>;\n code: DetailedHTMLFactory, HTMLElement>;\n col: DetailedHTMLFactory, HTMLTableColElement>;\n colgroup: DetailedHTMLFactory, HTMLTableColElement>;\n data: DetailedHTMLFactory, HTMLDataElement>;\n datalist: DetailedHTMLFactory, HTMLDataListElement>;\n dd: DetailedHTMLFactory, HTMLElement>;\n del: DetailedHTMLFactory, HTMLModElement>;\n details: DetailedHTMLFactory, HTMLDetailsElement>;\n dfn: DetailedHTMLFactory, HTMLElement>;\n dialog: DetailedHTMLFactory, HTMLDialogElement>;\n div: DetailedHTMLFactory, HTMLDivElement>;\n dl: DetailedHTMLFactory, HTMLDListElement>;\n dt: DetailedHTMLFactory, HTMLElement>;\n em: DetailedHTMLFactory, HTMLElement>;\n embed: DetailedHTMLFactory, HTMLEmbedElement>;\n fieldset: DetailedHTMLFactory, HTMLFieldSetElement>;\n figcaption: DetailedHTMLFactory, HTMLElement>;\n figure: DetailedHTMLFactory, HTMLElement>;\n footer: DetailedHTMLFactory, HTMLElement>;\n form: DetailedHTMLFactory, HTMLFormElement>;\n h1: DetailedHTMLFactory, HTMLHeadingElement>;\n h2: DetailedHTMLFactory, HTMLHeadingElement>;\n h3: DetailedHTMLFactory, HTMLHeadingElement>;\n h4: DetailedHTMLFactory, HTMLHeadingElement>;\n h5: DetailedHTMLFactory, HTMLHeadingElement>;\n h6: DetailedHTMLFactory, HTMLHeadingElement>;\n head: DetailedHTMLFactory, HTMLHeadElement>;\n header: DetailedHTMLFactory, HTMLElement>;\n hgroup: DetailedHTMLFactory, HTMLElement>;\n hr: DetailedHTMLFactory, HTMLHRElement>;\n html: DetailedHTMLFactory, HTMLHtmlElement>;\n i: DetailedHTMLFactory, HTMLElement>;\n iframe: DetailedHTMLFactory, HTMLIFrameElement>;\n img: DetailedHTMLFactory, HTMLImageElement>;\n input: DetailedHTMLFactory, HTMLInputElement>;\n ins: DetailedHTMLFactory, HTMLModElement>;\n kbd: DetailedHTMLFactory, HTMLElement>;\n keygen: DetailedHTMLFactory, HTMLElement>;\n label: DetailedHTMLFactory, HTMLLabelElement>;\n legend: DetailedHTMLFactory, HTMLLegendElement>;\n li: DetailedHTMLFactory, HTMLLIElement>;\n link: DetailedHTMLFactory, HTMLLinkElement>;\n main: DetailedHTMLFactory, HTMLElement>;\n map: DetailedHTMLFactory, HTMLMapElement>;\n mark: DetailedHTMLFactory, HTMLElement>;\n menu: DetailedHTMLFactory, HTMLElement>;\n menuitem: DetailedHTMLFactory, HTMLElement>;\n meta: DetailedHTMLFactory, HTMLMetaElement>;\n meter: DetailedHTMLFactory, HTMLMeterElement>;\n nav: DetailedHTMLFactory, HTMLElement>;\n noscript: DetailedHTMLFactory, HTMLElement>;\n object: DetailedHTMLFactory, HTMLObjectElement>;\n ol: DetailedHTMLFactory, HTMLOListElement>;\n optgroup: DetailedHTMLFactory, HTMLOptGroupElement>;\n option: DetailedHTMLFactory, HTMLOptionElement>;\n output: DetailedHTMLFactory, HTMLOutputElement>;\n p: DetailedHTMLFactory, HTMLParagraphElement>;\n param: DetailedHTMLFactory, HTMLParamElement>;\n picture: DetailedHTMLFactory, HTMLElement>;\n pre: DetailedHTMLFactory, HTMLPreElement>;\n progress: DetailedHTMLFactory, HTMLProgressElement>;\n q: DetailedHTMLFactory, HTMLQuoteElement>;\n rp: DetailedHTMLFactory, HTMLElement>;\n rt: DetailedHTMLFactory, HTMLElement>;\n ruby: DetailedHTMLFactory, HTMLElement>;\n s: DetailedHTMLFactory, HTMLElement>;\n samp: DetailedHTMLFactory, HTMLElement>;\n search: DetailedHTMLFactory, HTMLElement>;\n slot: DetailedHTMLFactory, HTMLSlotElement>;\n script: DetailedHTMLFactory, HTMLScriptElement>;\n section: DetailedHTMLFactory, HTMLElement>;\n select: DetailedHTMLFactory, HTMLSelectElement>;\n small: DetailedHTMLFactory, HTMLElement>;\n source: DetailedHTMLFactory, HTMLSourceElement>;\n span: DetailedHTMLFactory, HTMLSpanElement>;\n strong: DetailedHTMLFactory, HTMLElement>;\n style: DetailedHTMLFactory, HTMLStyleElement>;\n sub: DetailedHTMLFactory, HTMLElement>;\n summary: DetailedHTMLFactory, HTMLElement>;\n sup: DetailedHTMLFactory, HTMLElement>;\n table: DetailedHTMLFactory, HTMLTableElement>;\n template: DetailedHTMLFactory, HTMLTemplateElement>;\n tbody: DetailedHTMLFactory, HTMLTableSectionElement>;\n td: DetailedHTMLFactory, HTMLTableDataCellElement>;\n textarea: DetailedHTMLFactory, HTMLTextAreaElement>;\n tfoot: DetailedHTMLFactory, HTMLTableSectionElement>;\n th: DetailedHTMLFactory, HTMLTableHeaderCellElement>;\n thead: DetailedHTMLFactory, HTMLTableSectionElement>;\n time: DetailedHTMLFactory, HTMLTimeElement>;\n title: DetailedHTMLFactory, HTMLTitleElement>;\n tr: DetailedHTMLFactory, HTMLTableRowElement>;\n track: DetailedHTMLFactory, HTMLTrackElement>;\n u: DetailedHTMLFactory, HTMLElement>;\n ul: DetailedHTMLFactory, HTMLUListElement>;\n \"var\": DetailedHTMLFactory, HTMLElement>;\n video: DetailedHTMLFactory, HTMLVideoElement>;\n wbr: DetailedHTMLFactory, HTMLElement>;\n webview: DetailedHTMLFactory, HTMLWebViewElement>;\n }\n\n /* deprecated */\n interface ReactSVG {\n animate: SVGFactory;\n circle: SVGFactory;\n clipPath: SVGFactory;\n defs: SVGFactory;\n desc: SVGFactory;\n ellipse: SVGFactory;\n feBlend: SVGFactory;\n feColorMatrix: SVGFactory;\n feComponentTransfer: SVGFactory;\n feComposite: SVGFactory;\n feConvolveMatrix: SVGFactory;\n feDiffuseLighting: SVGFactory;\n feDisplacementMap: SVGFactory;\n feDistantLight: SVGFactory;\n feDropShadow: SVGFactory;\n feFlood: SVGFactory;\n feFuncA: SVGFactory;\n feFuncB: SVGFactory;\n feFuncG: SVGFactory;\n feFuncR: SVGFactory;\n feGaussianBlur: SVGFactory;\n feImage: SVGFactory;\n feMerge: SVGFactory;\n feMergeNode: SVGFactory;\n feMorphology: SVGFactory;\n feOffset: SVGFactory;\n fePointLight: SVGFactory;\n feSpecularLighting: SVGFactory;\n feSpotLight: SVGFactory;\n feTile: SVGFactory;\n feTurbulence: SVGFactory;\n filter: SVGFactory;\n foreignObject: SVGFactory;\n g: SVGFactory;\n image: SVGFactory;\n line: SVGFactory;\n linearGradient: SVGFactory;\n marker: SVGFactory;\n mask: SVGFactory;\n metadata: SVGFactory;\n path: SVGFactory;\n pattern: SVGFactory;\n polygon: SVGFactory;\n polyline: SVGFactory;\n radialGradient: SVGFactory;\n rect: SVGFactory;\n stop: SVGFactory;\n svg: SVGFactory;\n switch: SVGFactory;\n symbol: SVGFactory;\n text: SVGFactory;\n textPath: SVGFactory;\n tspan: SVGFactory;\n use: SVGFactory;\n view: SVGFactory;\n }\n\n /* deprecated */\n interface ReactDOM extends ReactHTML, ReactSVG {}\n\n //\n // React.PropTypes\n // ----------------------------------------------------------------------\n\n /**\n * @deprecated Use `Validator` from the ´prop-types` instead.\n */\n type Validator = PropTypes.Validator;\n\n /**\n * @deprecated Use `Requireable` from the ´prop-types` instead.\n */\n type Requireable = PropTypes.Requireable;\n\n /**\n * @deprecated Use `ValidationMap` from the ´prop-types` instead.\n */\n type ValidationMap = PropTypes.ValidationMap;\n\n /**\n * @deprecated Use `WeakValidationMap` from the ´prop-types` instead.\n */\n type WeakValidationMap = {\n [K in keyof T]?: null extends T[K] ? Validator\n : undefined extends T[K] ? Validator\n : Validator;\n };\n\n /**\n * @deprecated Use `PropTypes.*` where `PropTypes` comes from `import * as PropTypes from 'prop-types'` instead.\n */\n interface ReactPropTypes {\n any: typeof PropTypes.any;\n array: typeof PropTypes.array;\n bool: typeof PropTypes.bool;\n func: typeof PropTypes.func;\n number: typeof PropTypes.number;\n object: typeof PropTypes.object;\n string: typeof PropTypes.string;\n node: typeof PropTypes.node;\n element: typeof PropTypes.element;\n instanceOf: typeof PropTypes.instanceOf;\n oneOf: typeof PropTypes.oneOf;\n oneOfType: typeof PropTypes.oneOfType;\n arrayOf: typeof PropTypes.arrayOf;\n objectOf: typeof PropTypes.objectOf;\n shape: typeof PropTypes.shape;\n exact: typeof PropTypes.exact;\n }\n\n //\n // React.Children\n // ----------------------------------------------------------------------\n\n /**\n * @deprecated - Use `typeof React.Children` instead.\n */\n // Sync with type of `const Children`.\n interface ReactChildren {\n map(\n children: C | readonly C[],\n fn: (child: C, index: number) => T,\n ): C extends null | undefined ? C : Array>;\n forEach(children: C | readonly C[], fn: (child: C, index: number) => void): void;\n count(children: any): number;\n only(children: C): C extends any[] ? never : C;\n toArray(children: ReactNode | ReactNode[]): Array>;\n }\n\n //\n // Browser Interfaces\n // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts\n // ----------------------------------------------------------------------\n\n interface AbstractView {\n styleMedia: StyleMedia;\n document: Document;\n }\n\n interface Touch {\n identifier: number;\n target: EventTarget;\n screenX: number;\n screenY: number;\n clientX: number;\n clientY: number;\n pageX: number;\n pageY: number;\n }\n\n interface TouchList {\n [index: number]: Touch;\n length: number;\n item(index: number): Touch;\n identifiedTouch(identifier: number): Touch;\n }\n\n //\n // Error Interfaces\n // ----------------------------------------------------------------------\n interface ErrorInfo {\n /**\n * Captures which component contained the exception, and its ancestors.\n */\n componentStack?: string | null;\n digest?: string | null;\n }\n\n // Keep in sync with JSX namespace in ./jsx-runtime.d.ts and ./jsx-dev-runtime.d.ts\n namespace JSX {\n type ElementType = GlobalJSXElementType;\n interface Element extends GlobalJSXElement {}\n interface ElementClass extends GlobalJSXElementClass {}\n interface ElementAttributesProperty extends GlobalJSXElementAttributesProperty {}\n interface ElementChildrenAttribute extends GlobalJSXElementChildrenAttribute {}\n\n type LibraryManagedAttributes = GlobalJSXLibraryManagedAttributes;\n\n interface IntrinsicAttributes extends GlobalJSXIntrinsicAttributes {}\n interface IntrinsicClassAttributes extends GlobalJSXIntrinsicClassAttributes {}\n interface IntrinsicElements extends GlobalJSXIntrinsicElements {}\n }\n}\n\n// naked 'any' type in a conditional type will short circuit and union both the then/else branches\n// so boolean is only resolved for T = any\ntype IsExactlyAny = boolean extends (T extends never ? true : false) ? true : false;\n\ntype ExactlyAnyPropertyKeys = { [K in keyof T]: IsExactlyAny extends true ? K : never }[keyof T];\ntype NotExactlyAnyPropertyKeys = Exclude>;\n\n// Try to resolve ill-defined props like for JS users: props can be any, or sometimes objects with properties of type any\ntype MergePropTypes =\n // Distribute over P in case it is a union type\n P extends any\n // If props is type any, use propTypes definitions\n ? IsExactlyAny

extends true ? T\n // If declared props have indexed properties, ignore inferred props entirely as keyof gets widened\n : string extends keyof P ? P\n // Prefer declared types which are not exactly any\n :\n & Pick>\n // For props which are exactly any, use the type inferred from propTypes if present\n & Pick>>\n // Keep leftover props not specified in propTypes\n & Pick>\n : never;\n\ntype InexactPartial = { [K in keyof T]?: T[K] | undefined };\n\n// Any prop that has a default prop becomes optional, but its type is unchanged\n// Undeclared default props are augmented into the resulting allowable attributes\n// If declared props have indexed properties, ignore default props entirely as keyof gets widened\n// Wrap in an outer-level conditional type to allow distribution over props that are unions\ntype Defaultize = P extends any ? string extends keyof P ? P\n :\n & Pick>\n & InexactPartial>>\n & InexactPartial>>\n : never;\n\ntype ReactManagedAttributes = C extends { propTypes: infer T; defaultProps: infer D }\n ? Defaultize>, D>\n : C extends { propTypes: infer T } ? MergePropTypes>\n : C extends { defaultProps: infer D } ? Defaultize\n : P;\n\ndeclare global {\n /**\n * @deprecated Use `React.JSX` instead of the global `JSX` namespace.\n */\n namespace JSX {\n // We don't just alias React.ElementType because React.ElementType\n // historically does more than we need it to.\n // E.g. it also contains .propTypes and so TS also verifies the declared\n // props type does match the declared .propTypes.\n // But if libraries declared their .propTypes but not props type,\n // or they mismatch, you won't be able to use the class component\n // as a JSX.ElementType.\n // We could fix this everywhere but we're ultimately not interested in\n // .propTypes assignability so we might as well drop it entirely here to\n // reduce the work of the type-checker.\n // TODO: Check impact of making React.ElementType

= React.JSXElementConstructor

\n type ElementType = string | React.JSXElementConstructor;\n interface Element extends React.ReactElement {}\n interface ElementClass extends React.Component {\n render(): React.ReactNode;\n }\n interface ElementAttributesProperty {\n props: {};\n }\n interface ElementChildrenAttribute {\n children: {};\n }\n\n // We can't recurse forever because `type` can't be self-referential;\n // let's assume it's reasonable to do a single React.lazy() around a single React.memo() / vice-versa\n type LibraryManagedAttributes = C extends\n React.MemoExoticComponent | React.LazyExoticComponent\n ? T extends React.MemoExoticComponent | React.LazyExoticComponent\n ? ReactManagedAttributes\n : ReactManagedAttributes\n : ReactManagedAttributes;\n\n interface IntrinsicAttributes extends React.Attributes {}\n interface IntrinsicClassAttributes extends React.ClassAttributes {}\n\n interface IntrinsicElements {\n // HTML\n a: React.DetailedHTMLProps, HTMLAnchorElement>;\n abbr: React.DetailedHTMLProps, HTMLElement>;\n address: React.DetailedHTMLProps, HTMLElement>;\n area: React.DetailedHTMLProps, HTMLAreaElement>;\n article: React.DetailedHTMLProps, HTMLElement>;\n aside: React.DetailedHTMLProps, HTMLElement>;\n audio: React.DetailedHTMLProps, HTMLAudioElement>;\n b: React.DetailedHTMLProps, HTMLElement>;\n base: React.DetailedHTMLProps, HTMLBaseElement>;\n bdi: React.DetailedHTMLProps, HTMLElement>;\n bdo: React.DetailedHTMLProps, HTMLElement>;\n big: React.DetailedHTMLProps, HTMLElement>;\n blockquote: React.DetailedHTMLProps, HTMLQuoteElement>;\n body: React.DetailedHTMLProps, HTMLBodyElement>;\n br: React.DetailedHTMLProps, HTMLBRElement>;\n button: React.DetailedHTMLProps, HTMLButtonElement>;\n canvas: React.DetailedHTMLProps, HTMLCanvasElement>;\n caption: React.DetailedHTMLProps, HTMLElement>;\n center: React.DetailedHTMLProps, HTMLElement>;\n cite: React.DetailedHTMLProps, HTMLElement>;\n code: React.DetailedHTMLProps, HTMLElement>;\n col: React.DetailedHTMLProps, HTMLTableColElement>;\n colgroup: React.DetailedHTMLProps, HTMLTableColElement>;\n data: React.DetailedHTMLProps, HTMLDataElement>;\n datalist: React.DetailedHTMLProps, HTMLDataListElement>;\n dd: React.DetailedHTMLProps, HTMLElement>;\n del: React.DetailedHTMLProps, HTMLModElement>;\n details: React.DetailedHTMLProps, HTMLDetailsElement>;\n dfn: React.DetailedHTMLProps, HTMLElement>;\n dialog: React.DetailedHTMLProps, HTMLDialogElement>;\n div: React.DetailedHTMLProps, HTMLDivElement>;\n dl: React.DetailedHTMLProps, HTMLDListElement>;\n dt: React.DetailedHTMLProps, HTMLElement>;\n em: React.DetailedHTMLProps, HTMLElement>;\n embed: React.DetailedHTMLProps, HTMLEmbedElement>;\n fieldset: React.DetailedHTMLProps, HTMLFieldSetElement>;\n figcaption: React.DetailedHTMLProps, HTMLElement>;\n figure: React.DetailedHTMLProps, HTMLElement>;\n footer: React.DetailedHTMLProps, HTMLElement>;\n form: React.DetailedHTMLProps, HTMLFormElement>;\n h1: React.DetailedHTMLProps, HTMLHeadingElement>;\n h2: React.DetailedHTMLProps, HTMLHeadingElement>;\n h3: React.DetailedHTMLProps, HTMLHeadingElement>;\n h4: React.DetailedHTMLProps, HTMLHeadingElement>;\n h5: React.DetailedHTMLProps, HTMLHeadingElement>;\n h6: React.DetailedHTMLProps, HTMLHeadingElement>;\n head: React.DetailedHTMLProps, HTMLHeadElement>;\n header: React.DetailedHTMLProps, HTMLElement>;\n hgroup: React.DetailedHTMLProps, HTMLElement>;\n hr: React.DetailedHTMLProps, HTMLHRElement>;\n html: React.DetailedHTMLProps, HTMLHtmlElement>;\n i: React.DetailedHTMLProps, HTMLElement>;\n iframe: React.DetailedHTMLProps, HTMLIFrameElement>;\n img: React.DetailedHTMLProps, HTMLImageElement>;\n input: React.DetailedHTMLProps, HTMLInputElement>;\n ins: React.DetailedHTMLProps, HTMLModElement>;\n kbd: React.DetailedHTMLProps, HTMLElement>;\n keygen: React.DetailedHTMLProps, HTMLElement>;\n label: React.DetailedHTMLProps, HTMLLabelElement>;\n legend: React.DetailedHTMLProps, HTMLLegendElement>;\n li: React.DetailedHTMLProps, HTMLLIElement>;\n link: React.DetailedHTMLProps, HTMLLinkElement>;\n main: React.DetailedHTMLProps, HTMLElement>;\n map: React.DetailedHTMLProps, HTMLMapElement>;\n mark: React.DetailedHTMLProps, HTMLElement>;\n menu: React.DetailedHTMLProps, HTMLElement>;\n menuitem: React.DetailedHTMLProps, HTMLElement>;\n meta: React.DetailedHTMLProps, HTMLMetaElement>;\n meter: React.DetailedHTMLProps, HTMLMeterElement>;\n nav: React.DetailedHTMLProps, HTMLElement>;\n noindex: React.DetailedHTMLProps, HTMLElement>;\n noscript: React.DetailedHTMLProps, HTMLElement>;\n object: React.DetailedHTMLProps, HTMLObjectElement>;\n ol: React.DetailedHTMLProps, HTMLOListElement>;\n optgroup: React.DetailedHTMLProps, HTMLOptGroupElement>;\n option: React.DetailedHTMLProps, HTMLOptionElement>;\n output: React.DetailedHTMLProps, HTMLOutputElement>;\n p: React.DetailedHTMLProps, HTMLParagraphElement>;\n param: React.DetailedHTMLProps, HTMLParamElement>;\n picture: React.DetailedHTMLProps, HTMLElement>;\n pre: React.DetailedHTMLProps, HTMLPreElement>;\n progress: React.DetailedHTMLProps, HTMLProgressElement>;\n q: React.DetailedHTMLProps, HTMLQuoteElement>;\n rp: React.DetailedHTMLProps, HTMLElement>;\n rt: React.DetailedHTMLProps, HTMLElement>;\n ruby: React.DetailedHTMLProps, HTMLElement>;\n s: React.DetailedHTMLProps, HTMLElement>;\n samp: React.DetailedHTMLProps, HTMLElement>;\n search: React.DetailedHTMLProps, HTMLElement>;\n slot: React.DetailedHTMLProps, HTMLSlotElement>;\n script: React.DetailedHTMLProps, HTMLScriptElement>;\n section: React.DetailedHTMLProps, HTMLElement>;\n select: React.DetailedHTMLProps, HTMLSelectElement>;\n small: React.DetailedHTMLProps, HTMLElement>;\n source: React.DetailedHTMLProps, HTMLSourceElement>;\n span: React.DetailedHTMLProps, HTMLSpanElement>;\n strong: React.DetailedHTMLProps, HTMLElement>;\n style: React.DetailedHTMLProps, HTMLStyleElement>;\n sub: React.DetailedHTMLProps, HTMLElement>;\n summary: React.DetailedHTMLProps, HTMLElement>;\n sup: React.DetailedHTMLProps, HTMLElement>;\n table: React.DetailedHTMLProps, HTMLTableElement>;\n template: React.DetailedHTMLProps, HTMLTemplateElement>;\n tbody: React.DetailedHTMLProps, HTMLTableSectionElement>;\n td: React.DetailedHTMLProps, HTMLTableDataCellElement>;\n textarea: React.DetailedHTMLProps, HTMLTextAreaElement>;\n tfoot: React.DetailedHTMLProps, HTMLTableSectionElement>;\n th: React.DetailedHTMLProps, HTMLTableHeaderCellElement>;\n thead: React.DetailedHTMLProps, HTMLTableSectionElement>;\n time: React.DetailedHTMLProps, HTMLTimeElement>;\n title: React.DetailedHTMLProps, HTMLTitleElement>;\n tr: React.DetailedHTMLProps, HTMLTableRowElement>;\n track: React.DetailedHTMLProps, HTMLTrackElement>;\n u: React.DetailedHTMLProps, HTMLElement>;\n ul: React.DetailedHTMLProps, HTMLUListElement>;\n \"var\": React.DetailedHTMLProps, HTMLElement>;\n video: React.DetailedHTMLProps, HTMLVideoElement>;\n wbr: React.DetailedHTMLProps, HTMLElement>;\n webview: React.DetailedHTMLProps, HTMLWebViewElement>;\n\n // SVG\n svg: React.SVGProps;\n\n animate: React.SVGProps; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now.\n animateMotion: React.SVGProps;\n animateTransform: React.SVGProps; // TODO: It is SVGAnimateTransformElement but is not in TypeScript's lib.dom.d.ts for now.\n circle: React.SVGProps;\n clipPath: React.SVGProps;\n defs: React.SVGProps;\n desc: React.SVGProps;\n ellipse: React.SVGProps;\n feBlend: React.SVGProps;\n feColorMatrix: React.SVGProps;\n feComponentTransfer: React.SVGProps;\n feComposite: React.SVGProps;\n feConvolveMatrix: React.SVGProps;\n feDiffuseLighting: React.SVGProps;\n feDisplacementMap: React.SVGProps;\n feDistantLight: React.SVGProps;\n feDropShadow: React.SVGProps;\n feFlood: React.SVGProps;\n feFuncA: React.SVGProps;\n feFuncB: React.SVGProps;\n feFuncG: React.SVGProps;\n feFuncR: React.SVGProps;\n feGaussianBlur: React.SVGProps;\n feImage: React.SVGProps;\n feMerge: React.SVGProps;\n feMergeNode: React.SVGProps;\n feMorphology: React.SVGProps;\n feOffset: React.SVGProps;\n fePointLight: React.SVGProps;\n feSpecularLighting: React.SVGProps;\n feSpotLight: React.SVGProps;\n feTile: React.SVGProps;\n feTurbulence: React.SVGProps;\n filter: React.SVGProps;\n foreignObject: React.SVGProps;\n g: React.SVGProps;\n image: React.SVGProps;\n line: React.SVGLineElementAttributes;\n linearGradient: React.SVGProps;\n marker: React.SVGProps;\n mask: React.SVGProps;\n metadata: React.SVGProps;\n mpath: React.SVGProps;\n path: React.SVGProps;\n pattern: React.SVGProps;\n polygon: React.SVGProps;\n polyline: React.SVGProps;\n radialGradient: React.SVGProps;\n rect: React.SVGProps;\n set: React.SVGProps;\n stop: React.SVGProps;\n switch: React.SVGProps;\n symbol: React.SVGProps;\n text: React.SVGTextElementAttributes;\n textPath: React.SVGProps;\n tspan: React.SVGProps;\n use: React.SVGProps;\n view: React.SVGProps;\n }\n }\n}\n\n// React.JSX needs to point to global.JSX to keep global module augmentations intact.\n// But we can't access global.JSX so we need to create these aliases instead.\n// Once the global JSX namespace will be removed we replace React.JSX with the contents of global.JSX\ntype GlobalJSXElementType = JSX.ElementType;\ninterface GlobalJSXElement extends JSX.Element {}\ninterface GlobalJSXElementClass extends JSX.ElementClass {}\ninterface GlobalJSXElementAttributesProperty extends JSX.ElementAttributesProperty {}\ninterface GlobalJSXElementChildrenAttribute extends JSX.ElementChildrenAttribute {}\n\ntype GlobalJSXLibraryManagedAttributes = JSX.LibraryManagedAttributes;\n\ninterface GlobalJSXIntrinsicAttributes extends JSX.IntrinsicAttributes {}\ninterface GlobalJSXIntrinsicClassAttributes extends JSX.IntrinsicClassAttributes {}\n\ninterface GlobalJSXIntrinsicElements extends JSX.IntrinsicElements {}\n" +} diff --git a/tools/client-plugins/browser-scripts/typescript-worker.ts b/tools/client-plugins/browser-scripts/typescript-worker.ts index 89ae2ea2a35..2c6397d134f 100644 --- a/tools/client-plugins/browser-scripts/typescript-worker.ts +++ b/tools/client-plugins/browser-scripts/typescript-worker.ts @@ -1,5 +1,6 @@ import { type VirtualTypeScriptEnvironment } from '@typescript/vfs'; import type { CompilerOptions, CompilerHost } from 'typescript'; +import reactTypes from './react-types.json'; // Most of the ts types are only a guideline. This is because we're not bundling // TS in this worker. The specific TS version is going to be determined by the @@ -40,7 +41,7 @@ interface CancelEvent extends MessageEvent { } // Pin at the latest TS version available as cdnjs doesn't support version range. -const TS_VERSION = '5.7.3'; +const TS_VERSION = '5.9.2'; let tsEnv: VirtualTypeScriptEnvironment | null = null; let compilerHost: CompilerHost | null = null; @@ -54,7 +55,12 @@ importScripts( function importTS(version: string) { if (cachedVersion == version) return; importScripts( - `https://cdnjs.cloudflare.com/ajax/libs/typescript/${version}/typescript.min.js` + /* typescript.min.js fails with + + typescript.min.js:320 Uncaught TypeError: Class constructors cannot be invoked without 'new' + + so we're using the non-minified version for now. */ + `https://cdnjs.cloudflare.com/ajax/libs/typescript/${version}/typescript.js` ); cachedVersion = version; } @@ -63,10 +69,13 @@ async function setupTypeScript() { importTS(TS_VERSION); const compilerOptions: CompilerOptions = { target: ts.ScriptTarget.ES2015, - skipLibCheck: true // TODO: look into why this is needed. Are we doing something wrong? Could it be that it's not "synced" with this TS version? + module: ts.ModuleKind.Preserve, // Babel is handling module transformation, so TS should leave them alone. + skipLibCheck: true, // TODO: look into why this is needed. Are we doing something wrong? Could it be that it's not "synced" with this TS version? // from the docs: "Note: it's possible for this list to get out of // sync with TypeScript over time. It was last synced with TypeScript // 3.8.0-rc." + jsx: ts.JsxEmit.Preserve, // Babel will handle JSX, + allowUmdGlobalAccess: true // Necessary because React is loaded via a UMD script. }; const fsMap = await createDefaultMapFromCDN( compilerOptions, @@ -75,6 +84,12 @@ async function setupTypeScript() { ts ); + // This can be any path, but doing this means import React from 'react' works, if we ever need it. + const reactTypesPath = `/node_modules/@types/react/index.d.ts`; + + // It may be necessary to get all the types (global.d.ts etc) + fsMap.set(reactTypesPath, reactTypes['react-18'] || ''); + const system = tsvfs.createSystem(fsMap); // TODO: if passed an invalid compiler options object (e.g. { module: // ts.ModuleKind.CommonJS, moduleResolution: ts.ModuleResolutionKind.NodeNext @@ -82,10 +97,11 @@ async function setupTypeScript() { // show them the diagnostics from this function. const env = tsvfs.createVirtualTypeScriptEnvironment( system, - [], + [reactTypesPath], ts, compilerOptions ); + compilerHost = createVirtualCompilerHost( system, compilerOptions, @@ -133,11 +149,12 @@ function handleCompileRequest(data: TSCompileEvent['data'], port: MessagePort) { // TODO: If creating the file fresh each time is too slow, we can try checking // if the file exists and updating it if it does. - tsEnv?.createFile('index.ts', code); + // TODO: make sure the .tsx extension doesn't cause issues with vanilla TS. + tsEnv?.createFile('/index.tsx', code); const program = tsEnv!.languageService.getProgram()!; - const emitOutput = tsEnv!.languageService.getEmitOutput('index.ts'); + const emitOutput = tsEnv!.languageService.getEmitOutput('index.tsx'); const compiled = emitOutput.outputFiles[0].text; const message: TSCompiledMessage = {