From 1571482db363255cbdd485f1e049282ec3de16ed Mon Sep 17 00:00:00 2001 From: "UZU, J" <woojoo@softmarshmallow.com> Date: Mon, 1 Nov 2021 19:06:36 +0900 Subject: [PATCH 1/9] init pusher & pages --- editor-packages/README.md | 0 editor-packages/editor-live-session/README.md | 5 +++ editor-packages/editor-live-session/index.ts | 3 ++ .../editor-live-session/package.json | 9 +++++ editor/.env.defaults | 6 ++++ editor/next.config.js | 3 ++ editor/pages/_playground/.gitignore | 3 -- editor/pages/_playground/index.tsx | 9 ----- editor/pages/embed/index.tsx | 5 +++ editor/pages/live/index.tsx | 34 ++++++++++++++++++- 10 files changed, 64 insertions(+), 13 deletions(-) create mode 100644 editor-packages/README.md create mode 100644 editor-packages/editor-live-session/README.md create mode 100644 editor-packages/editor-live-session/index.ts create mode 100644 editor-packages/editor-live-session/package.json delete mode 100644 editor/pages/_playground/.gitignore delete mode 100644 editor/pages/_playground/index.tsx create mode 100644 editor/pages/embed/index.tsx diff --git a/editor-packages/README.md b/editor-packages/README.md new file mode 100644 index 000000000..e69de29bb diff --git a/editor-packages/editor-live-session/README.md b/editor-packages/editor-live-session/README.md new file mode 100644 index 000000000..4bd372b25 --- /dev/null +++ b/editor-packages/editor-live-session/README.md @@ -0,0 +1,5 @@ +# A Live session listener app + +## From assistant + +## .env setup diff --git a/editor-packages/editor-live-session/index.ts b/editor-packages/editor-live-session/index.ts new file mode 100644 index 000000000..8d949dc4b --- /dev/null +++ b/editor-packages/editor-live-session/index.ts @@ -0,0 +1,3 @@ +export function connect() { + throw ""; +} diff --git a/editor-packages/editor-live-session/package.json b/editor-packages/editor-live-session/package.json new file mode 100644 index 000000000..d8227e6a4 --- /dev/null +++ b/editor-packages/editor-live-session/package.json @@ -0,0 +1,9 @@ +{ + "name": "@editor-app/live-session", + "version": "0.0.0", + "private": false, + "main": "index.ts", + "dependencies": { + "pusher-js": "^7.0.3" + } +} \ No newline at end of file diff --git a/editor/.env.defaults b/editor/.env.defaults index d6a335317..fb11055e0 100644 --- a/editor/.env.defaults +++ b/editor/.env.defaults @@ -1 +1,7 @@ +# General figma personal access token (optional, only used for development) FIGMA_PERSONAL_ACCESS_TOKEN='your-access-token-here' + +# Pusher API Key for `@editor-app/live-session` +NEXT_PUBLIC_PUSHER_APP_ID=000 +NEXT_PUBLIC_PUSHER_KEY=000 +NEXT_PUBLIC_PUSHER_CLUSTER=us3 \ No newline at end of file diff --git a/editor/next.config.js b/editor/next.config.js index e62444f62..a44c5bda5 100644 --- a/editor/next.config.js +++ b/editor/next.config.js @@ -1,4 +1,7 @@ const withTM = require("next-transpile-modules")([ + // region @editor-app + "@editor-app/live-session", + // ----------------------------- // region @designto-code "@designto/config", diff --git a/editor/pages/_playground/.gitignore b/editor/pages/_playground/.gitignore deleted file mode 100644 index 95d9fba91..000000000 --- a/editor/pages/_playground/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -*.play.tsx -*.play.jsx -*.play.js \ No newline at end of file diff --git a/editor/pages/_playground/index.tsx b/editor/pages/_playground/index.tsx deleted file mode 100644 index c59546e1d..000000000 --- a/editor/pages/_playground/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -export default function () { - return ( - <> - Playground. make your playground screen under this directory. it won't be - included in GIT. (name it *.play.tsx) - </> - ); -} diff --git a/editor/pages/embed/index.tsx b/editor/pages/embed/index.tsx new file mode 100644 index 000000000..620ab0bfb --- /dev/null +++ b/editor/pages/embed/index.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function Embed() { + return <div>Embed</div>; +} diff --git a/editor/pages/live/index.tsx b/editor/pages/live/index.tsx index 0a74200f1..9bbcb979e 100644 --- a/editor/pages/live/index.tsx +++ b/editor/pages/live/index.tsx @@ -1,5 +1,37 @@ import React from "react"; +import Pusher from "pusher-js"; +import { useState } from "react"; + +const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, {}); export default function LiveSessionPage() { - return <>WIP live session page</>; + const [channel, setChannel] = useState<string>(); + const [lastmessage, setLastmessage] = useState<string>(); + + const connect = () => { + pusher.channel(channel); + }; + + return ( + <div style={{ margin: 24 }}> + <input + placeholder="channel" + onChange={(e) => { + setChannel(e.target.value); + }} + /> + <button disabled={!!!channel} onClick={connect}> + connect + </button> + {lastmessage ? ( + <> + <p>{lastmessage}</p> + </> + ) : ( + <> + <p>No session connection</p> + </> + )} + </div> + ); } From 0ad2763664397c79a264c1caebc3ea0de41cb892 Mon Sep 17 00:00:00 2001 From: "UZU, J" <woojoo@softmarshmallow.com> Date: Tue, 2 Nov 2021 01:04:45 +0900 Subject: [PATCH 2/9] add server auth --- editor/pages/live/index.tsx | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/editor/pages/live/index.tsx b/editor/pages/live/index.tsx index 9bbcb979e..acf7b3c78 100644 --- a/editor/pages/live/index.tsx +++ b/editor/pages/live/index.tsx @@ -1,28 +1,30 @@ import React from "react"; import Pusher from "pusher-js"; import { useState } from "react"; +import { useEffect } from "react"; -const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, {}); +const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, { + // 'live-session-from-assistant' + cluster: "us3", + authEndpoint: "https://assistant-live-session.grida.cc/pusher/auth", +}); export default function LiveSessionPage() { - const [channel, setChannel] = useState<string>(); + // const [channel, setChannel] = useState<string>(); const [lastmessage, setLastmessage] = useState<string>(); - const connect = () => { - pusher.channel(channel); - }; + useEffect(() => { + // TODO: - add auth guard + + // subscribe once wheb the page is loaded + const subscription = pusher.subscribe("private-live-session"); // channel + subscription.bind("client-select", (d) => { + setLastmessage(JSON.stringify(d)); + }); + }, []); return ( <div style={{ margin: 24 }}> - <input - placeholder="channel" - onChange={(e) => { - setChannel(e.target.value); - }} - /> - <button disabled={!!!channel} onClick={connect}> - connect - </button> {lastmessage ? ( <> <p>{lastmessage}</p> From 87f0dcae7c97fae6239d557c8020ccada5f0aefe Mon Sep 17 00:00:00 2001 From: softmarshmallow <woojoo@softmarshmallow.com> Date: Tue, 2 Nov 2021 14:33:15 +0900 Subject: [PATCH 3/9] update endpoint --- editor/pages/live/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/editor/pages/live/index.tsx b/editor/pages/live/index.tsx index acf7b3c78..7eb7a9d2b 100644 --- a/editor/pages/live/index.tsx +++ b/editor/pages/live/index.tsx @@ -3,10 +3,13 @@ import Pusher from "pusher-js"; import { useState } from "react"; import { useEffect } from "react"; +const _base_url = + "https://ahzdf5x4q3.execute-api.us-west-1.amazonaws.com/production"; // "https://assistant-live-session.grida.cc"; + const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, { // 'live-session-from-assistant' cluster: "us3", - authEndpoint: "https://assistant-live-session.grida.cc/pusher/auth", + authEndpoint: _base_url + "/pusher/auth", }); export default function LiveSessionPage() { From 323f2db12189abbb45c618e19aae63c5decf37e8 Mon Sep 17 00:00:00 2001 From: softmarshmallow <woojoo@softmarshmallow.com> Date: Tue, 2 Nov 2021 15:06:55 +0900 Subject: [PATCH 4/9] update use-design hooks to accept router, url and config to load the final design --- editor/layout/loading-overlay/index.tsx | 12 +- editor/pages/figma/inspect-component.tsx | 2 +- editor/pages/figma/inspect-frame.tsx | 2 +- editor/pages/figma/inspect-raw.tsx | 2 +- editor/pages/figma/to-flutter.tsx | 2 +- editor/pages/figma/to-token.tsx | 2 +- editor/pages/live/index.tsx | 15 +- editor/pages/to-code/index.tsx | 2 +- editor/query-hooks/use-design.ts | 180 +++++++++++------- .../index.ts | 19 +- 10 files changed, 159 insertions(+), 79 deletions(-) diff --git a/editor/layout/loading-overlay/index.tsx b/editor/layout/loading-overlay/index.tsx index 4381f182a..5f240cae7 100644 --- a/editor/layout/loading-overlay/index.tsx +++ b/editor/layout/loading-overlay/index.tsx @@ -5,14 +5,20 @@ import styled from "@emotion/styled"; * [design](https://www.figma.com/file/HSozKEVWhh8saZa2vr1Nxd/design-to-code?node-id=554%3A6162) * @returns */ -function LoadingLayout() { +function LoadingLayout({ + title = "Loading", + content = "We are now loading design remotely..", +}: { + title?: string; + content?: string; +}) { return ( <RootWrapperLoadingLayout> <Frame61> <Frame5> - <Loading>Loading</Loading> + <Loading>{title}</Loading> <WeAreNowLoadingDesignRemotely> - We are now loading design remotely.. + {content} </WeAreNowLoadingDesignRemotely> </Frame5> </Frame61> diff --git a/editor/pages/figma/inspect-component.tsx b/editor/pages/figma/inspect-component.tsx index ff7cdf19e..ed7bf4b2b 100644 --- a/editor/pages/figma/inspect-component.tsx +++ b/editor/pages/figma/inspect-component.tsx @@ -22,7 +22,7 @@ import { make_instance_component_meta } from "@code-features/component"; export default function InspectComponent() { // - const design = useDesign(); + const design = useDesign({ type: "use-router" }); if (!design) { return <LoadingLayout />; } diff --git a/editor/pages/figma/inspect-frame.tsx b/editor/pages/figma/inspect-frame.tsx index 8416da3cc..54495d3a4 100644 --- a/editor/pages/figma/inspect-frame.tsx +++ b/editor/pages/figma/inspect-frame.tsx @@ -10,7 +10,7 @@ import LoadingLayout from "../../layout/loading-overlay"; */ export default function InspectAutolayout() { // - const design = useDesign(); + const design = useDesign({ type: "use-router" }); if (!design) { return <LoadingLayout />; } diff --git a/editor/pages/figma/inspect-raw.tsx b/editor/pages/figma/inspect-raw.tsx index df7a0d535..7ed906e59 100644 --- a/editor/pages/figma/inspect-raw.tsx +++ b/editor/pages/figma/inspect-raw.tsx @@ -9,7 +9,7 @@ import LoadingLayout from "../../layout/loading-overlay"; */ export default function InspectRaw() { // - const design = useDesign(); + const design = useDesign({ type: "use-router" }); if (!design) { return <LoadingLayout />; } diff --git a/editor/pages/figma/to-flutter.tsx b/editor/pages/figma/to-flutter.tsx index 6a0fddb92..a7dbbc618 100644 --- a/editor/pages/figma/to-flutter.tsx +++ b/editor/pages/figma/to-flutter.tsx @@ -21,7 +21,7 @@ import { CodeEditor, MonacoEditor } from "../../components/code-editor"; import LoadingLayout from "../../layout/loading-overlay"; export default function FigmaToFlutterPage() { - const design = useDesign(); + const design = useDesign({ type: "use-router" }); const [result, setResult] = useState<output.ICodeOutput>(); useEffect(() => { diff --git a/editor/pages/figma/to-token.tsx b/editor/pages/figma/to-token.tsx index 10f7875f6..bc25b8c72 100644 --- a/editor/pages/figma/to-token.tsx +++ b/editor/pages/figma/to-token.tsx @@ -19,7 +19,7 @@ import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repo import LoadingLayout from "../../layout/loading-overlay"; export default function FigmaToReflectWidgetTokenPage() { - const design = useDesign(); + const design = useDesign({ type: "use-router" }); if (!design) { return <LoadingLayout />; diff --git a/editor/pages/live/index.tsx b/editor/pages/live/index.tsx index 7eb7a9d2b..b856181cd 100644 --- a/editor/pages/live/index.tsx +++ b/editor/pages/live/index.tsx @@ -2,6 +2,8 @@ import React from "react"; import Pusher from "pusher-js"; import { useState } from "react"; import { useEffect } from "react"; +import LoadingLayout from "../../layout/loading-overlay"; +import { useDesign } from "../../query-hooks"; const _base_url = "https://ahzdf5x4q3.execute-api.us-west-1.amazonaws.com/production"; // "https://assistant-live-session.grida.cc"; @@ -15,6 +17,14 @@ const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, { export default function LiveSessionPage() { // const [channel, setChannel] = useState<string>(); const [lastmessage, setLastmessage] = useState<string>(); + const [filekey, setFilekey] = useState<string>(); + const [nodeid, setNodeid] = useState<string>(); + + const design = useDesign({ + type: "use-file-node-id", + file: filekey, + node: nodeid, + }); useEffect(() => { // TODO: - add auth guard @@ -34,7 +44,10 @@ export default function LiveSessionPage() { </> ) : ( <> - <p>No session connection</p> + <LoadingLayout + title="Select design on figma" + content="Design selected on figma will be displayed here. On Assistant, Menu - Live - Connect" + /> </> )} </div> diff --git a/editor/pages/to-code/index.tsx b/editor/pages/to-code/index.tsx index da7a32dbb..f973a8ad4 100644 --- a/editor/pages/to-code/index.tsx +++ b/editor/pages/to-code/index.tsx @@ -30,7 +30,7 @@ import { WidgetTree } from "../../components/visualization/json-visualization/js export default function DesignToCodeUniversalPage() { const router = useRouter(); - const design = useDesign(); + const design = useDesign({ type: "use-router", router: router }); const [result, setResult] = useState<Result>(); const [preview, setPreview] = useState<Result>(); diff --git a/editor/query-hooks/use-design.ts b/editor/query-hooks/use-design.ts index dd3cfaf31..91fa8518c 100644 --- a/editor/query-hooks/use-design.ts +++ b/editor/query-hooks/use-design.ts @@ -1,4 +1,4 @@ -import { useRouter } from "next/router"; +import { NextRouter, useRouter } from "next/router"; import { useEffect, useState } from "react"; import { DesignProvider, analyzeDesignUrl } from "@design-sdk/url-analysis"; import { @@ -24,76 +24,126 @@ configure_auth_credentials({ */ const P_DESIGN = "design"; -export function useDesign( - options: { use_session_cache?: boolean } = { use_session_cache: true } -) { +type UseDesignProp = + | (UseDesignFromRouter & UseDesingOptions) + | (UseDesingFromUrl & UseDesingOptions) + | (UseDesignFromFileAndNode & UseDesingOptions); + +interface UseDesingOptions { + use_session_cache?: boolean; +} + +interface UseDesignFromRouter { + type: "use-router"; + router?: NextRouter; +} + +interface UseDesingFromUrl { + type: "use-url"; + url: string; +} + +interface UseDesignFromFileAndNode { + type: "use-file-node-id"; + file: string; + node: string; +} + +export function useDesign({ + use_session_cache = true, + type, + ...props +}: UseDesignProp) { const [design, setDesign] = useState<TargetNodeConfig>(null); - const router = useRouter(); + const router = (type === "use-router" && props["router"]) ?? useRouter(); useEffect(() => { - const designparam: string = router.query[P_DESIGN] as string; let targetnodeconfig: FigmaTargetNodeConfig; - if (designparam) { - const _r = analyze(designparam); - switch (_r) { - case "id": - // todo - // load design from local storage - // setDesign(designparam); - break; - case "figma": - // load design from local storage or remote figma - targetnodeconfig = parseFileAndNodeId(designparam); - const cacheStore = new RemoteDesignSessionCacheStore({ - url: targetnodeconfig.url, - }); - // cache control - if (options.use_session_cache && cacheStore.exists) { - const last_response = cacheStore.get(); - const _1_converted_to_figma = mapFigmaRemoteToFigma( - last_response.nodes[targetnodeconfig.node] - ); - const _2_converted_to_reflect = convert.intoReflectNode( - _1_converted_to_figma - ); + console.log("type", type); + switch (type) { + case "use-file-node-id": { + if (props["file"] && props["node"]) { + targetnodeconfig = { + file: props["file"], + node: props["node"], + url: `https://www.figma.com/file/${props["file"]}/${props["node"]}`, // only supports figma for now. improve this line + }; + } + break; + } + case "use-router": { + const designparam: string = router.query[P_DESIGN] as string; + const _r = designparam && analyze(designparam); + switch (_r) { + case "figma": { + targetnodeconfig = parseFileAndNodeId(designparam); + break; + } + case undefined: { + break; + } + default: { + throw new Error(`unknown design provider: ${_r}`); + // not supported + } + } + break; + } + case "use-url": { + targetnodeconfig = parseFileAndNodeId((props as UseDesingFromUrl).url); + break; + } + } + + if (targetnodeconfig) { + // load design from local storage or remote figma + + const cacheStore = new RemoteDesignSessionCacheStore({ + file: targetnodeconfig.file, + node: targetnodeconfig.node, + }); + // cache control + if (use_session_cache && cacheStore.exists) { + const last_response = cacheStore.get(); + const _1_converted_to_figma = mapFigmaRemoteToFigma( + last_response.nodes[targetnodeconfig.node] + ); + const _2_converted_to_reflect = convert.intoReflectNode( + _1_converted_to_figma + ); + setDesign(<TargetNodeConfig>{ + ...targetnodeconfig, + raw: last_response, + figma: _1_converted_to_figma, + reflect: _2_converted_to_reflect, + }); + } else { + fetch + .fetchTargetAsReflect({ + file: targetnodeconfig.file, + node: targetnodeconfig.node, + auth: { + personalAccessToken: personal.get_safe(), + }, + }) + .then((res) => { + cacheStore.set(res.raw); // setting cache does not need to be determined by `use_session_cache` option. setDesign(<TargetNodeConfig>{ + ...res, ...targetnodeconfig, - raw: last_response, - figma: _1_converted_to_figma, - reflect: _2_converted_to_reflect, }); - } else { - fetch - .fetchTargetAsReflect({ - file: targetnodeconfig.file, - node: targetnodeconfig.node, - auth: { - personalAccessToken: personal.get_safe(), - }, - }) - .then((res) => { - cacheStore.set(res.raw); // setting cache does not need to be determined by `use_session_cache` option. - setDesign(<TargetNodeConfig>{ - ...res, - ...targetnodeconfig, - }); - }) - .catch((err: FigmaRemoteErrors) => { - switch (err.type) { - case "UnauthorizedError": { - // unauthorized - router.push("/preferences/access-tokens"); - console.info(`(ignored) error while fetching design`, err); - break; - } - default: - throw err; - } - }); - } - - break; - default: - break; + }) + .catch((err: FigmaRemoteErrors) => { + switch (err.type) { + case "UnauthorizedError": { + // unauthorized + router.push("/preferences/access-tokens"); + console.info(`(ignored) error while fetching design`, err); + break; + } + default: + throw err; + } + }); } } }, [router]); diff --git a/editor/store/remote-design-session-cache-store/index.ts b/editor/store/remote-design-session-cache-store/index.ts index d83e93966..1d718d6ad 100644 --- a/editor/store/remote-design-session-cache-store/index.ts +++ b/editor/store/remote-design-session-cache-store/index.ts @@ -1,12 +1,21 @@ import { RawNodeResponse } from "@design-sdk/figma-remote"; +import { parseFileAndNodeId } from "@design-sdk/figma-url"; /** * Session cache for remote design. it works based on target url. */ export class RemoteDesignSessionCacheStore { - readonly url: string; - constructor({ url }: { url: string }) { - this.url = url; + readonly config: { + file: string; + node: string; + }; + + constructor(props: { url: string } | { file: string; node: string }) { + if ("url" in props) { + this.config = parseFileAndNodeId(props.url); + } else { + this.config = props; + } } set(raw: RawNodeResponse) { @@ -27,6 +36,8 @@ export class RemoteDesignSessionCacheStore { } private get key() { - return `remote-design-session-cache-${this.url}`; + return `remote-design-session-cache-${ + this.config.file + "-" + this.config.node + }`; } } From 054defa2252497735d93abccec7bf216ee63742d Mon Sep 17 00:00:00 2001 From: softmarshmallow <woojoo@softmarshmallow.com> Date: Tue, 2 Nov 2021 15:08:56 +0900 Subject: [PATCH 5/9] move use-design under `hooks` from `query-hooks` --- editor/hooks/index.ts | 1 + editor/{query-hooks => hooks}/use-design.ts | 4 ++-- editor/pages/figma/inspect-component.tsx | 2 +- editor/pages/figma/inspect-frame.tsx | 2 +- editor/pages/figma/inspect-raw.tsx | 2 +- editor/pages/figma/to-flutter.tsx | 2 +- editor/pages/figma/to-token.tsx | 2 +- editor/pages/live/index.tsx | 2 +- editor/pages/to-code/index.tsx | 2 +- editor/query-hooks/index.ts | 2 +- 10 files changed, 11 insertions(+), 10 deletions(-) rename editor/{query-hooks => hooks}/use-design.ts (96%) diff --git a/editor/hooks/index.ts b/editor/hooks/index.ts index d472ec912..d39a011cc 100644 --- a/editor/hooks/index.ts +++ b/editor/hooks/index.ts @@ -1 +1,2 @@ +export * from "./use-design"; export * from "./use-async-effect"; diff --git a/editor/query-hooks/use-design.ts b/editor/hooks/use-design.ts similarity index 96% rename from editor/query-hooks/use-design.ts rename to editor/hooks/use-design.ts index 91fa8518c..0360aab3e 100644 --- a/editor/query-hooks/use-design.ts +++ b/editor/hooks/use-design.ts @@ -11,8 +11,8 @@ import { configure_auth_credentials } from "@design-sdk/figma-remote"; import { TargetNodeConfig } from "../query/target-node"; import { FigmaRemoteErrors } from "@design-sdk/figma-remote/lib/fetch"; import { RemoteDesignSessionCacheStore } from "../store"; -import { convert } from "../../packages/design-sdk/figma-node-conversion"; -import { mapFigmaRemoteToFigma } from "../../packages/design-sdk/figma-remote/lib/mapper"; +import { convert } from "@design-sdk/figma-node-conversion"; +import { mapFigmaRemoteToFigma } from "@design-sdk/figma-remote/lib/mapper"; // globally configure auth credentials for interacting with `@design-sdk/figma-remote` configure_auth_credentials({ diff --git a/editor/pages/figma/inspect-component.tsx b/editor/pages/figma/inspect-component.tsx index ed7bf4b2b..a023ffe88 100644 --- a/editor/pages/figma/inspect-component.tsx +++ b/editor/pages/figma/inspect-component.tsx @@ -17,7 +17,7 @@ import { WorkspaceContentPanelGridLayout, } from "../../layout/panel"; import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout"; -import { useDesign } from "../../query-hooks"; +import { useDesign } from "../../hooks"; import { make_instance_component_meta } from "@code-features/component"; export default function InspectComponent() { diff --git a/editor/pages/figma/inspect-frame.tsx b/editor/pages/figma/inspect-frame.tsx index 54495d3a4..4fcd76df8 100644 --- a/editor/pages/figma/inspect-frame.tsx +++ b/editor/pages/figma/inspect-frame.tsx @@ -1,7 +1,7 @@ import React from "react"; import { MonacoEditor } from "../../components/code-editor"; import { SceneNode } from "@design-sdk/figma-types"; -import { useDesign } from "../../query-hooks"; +import { useDesign } from "../../hooks"; import LoadingLayout from "../../layout/loading-overlay"; /** diff --git a/editor/pages/figma/inspect-raw.tsx b/editor/pages/figma/inspect-raw.tsx index 7ed906e59..245c18061 100644 --- a/editor/pages/figma/inspect-raw.tsx +++ b/editor/pages/figma/inspect-raw.tsx @@ -1,6 +1,6 @@ import React from "react"; import { MonacoEditor } from "../../components/code-editor"; -import { useDesign } from "../../query-hooks"; +import { useDesign } from "../../hooks"; import LoadingLayout from "../../layout/loading-overlay"; /** diff --git a/editor/pages/figma/to-flutter.tsx b/editor/pages/figma/to-flutter.tsx index a7dbbc618..07e172dbf 100644 --- a/editor/pages/figma/to-flutter.tsx +++ b/editor/pages/figma/to-flutter.tsx @@ -16,7 +16,7 @@ import { WorkspaceContentPanelGridLayout, } from "../../layout/panel"; import { PreviewAndRunPanel } from "../../components/preview-and-run"; -import { useDesign } from "../../query-hooks"; +import { useDesign } from "../../hooks"; import { CodeEditor, MonacoEditor } from "../../components/code-editor"; import LoadingLayout from "../../layout/loading-overlay"; diff --git a/editor/pages/figma/to-token.tsx b/editor/pages/figma/to-token.tsx index bc25b8c72..5c6e1ac14 100644 --- a/editor/pages/figma/to-token.tsx +++ b/editor/pages/figma/to-token.tsx @@ -10,7 +10,7 @@ import { LayerHierarchy } from "../../components/editor-hierarchy"; import { WorkspaceContentPanelGridLayout } from "../../layout/panel/workspace-content-panel-grid-layout"; import { WorkspaceContentPanel } from "../../layout/panel"; import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout"; -import { useDesign } from "../../query-hooks"; +import { useDesign } from "../../hooks"; import { ImageRepository, MainImageRepository, diff --git a/editor/pages/live/index.tsx b/editor/pages/live/index.tsx index b856181cd..0c5e5c5c1 100644 --- a/editor/pages/live/index.tsx +++ b/editor/pages/live/index.tsx @@ -3,7 +3,7 @@ import Pusher from "pusher-js"; import { useState } from "react"; import { useEffect } from "react"; import LoadingLayout from "../../layout/loading-overlay"; -import { useDesign } from "../../query-hooks"; +import { useDesign } from "../../hooks"; const _base_url = "https://ahzdf5x4q3.execute-api.us-west-1.amazonaws.com/production"; // "https://assistant-live-session.grida.cc"; diff --git a/editor/pages/to-code/index.tsx b/editor/pages/to-code/index.tsx index f973a8ad4..84feb185c 100644 --- a/editor/pages/to-code/index.tsx +++ b/editor/pages/to-code/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import { designToCode, Result } from "@designto/code"; -import { useDesign } from "../../query-hooks"; +import { useDesign } from "../../hooks"; import styled from "@emotion/styled"; import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout"; import { PreviewAndRunPanel } from "../../components/preview-and-run"; diff --git a/editor/query-hooks/index.ts b/editor/query-hooks/index.ts index 627279471..5c9c23e34 100644 --- a/editor/query-hooks/index.ts +++ b/editor/query-hooks/index.ts @@ -1 +1 @@ -export * from "./use-design"; +export const dummy = "wip"; From adc0f9a485d6e9a49e11690c52c3844c148f45ee Mon Sep 17 00:00:00 2001 From: softmarshmallow <woojoo@softmarshmallow.com> Date: Tue, 2 Nov 2021 15:49:12 +0900 Subject: [PATCH 6/9] mvp of assistant live session (no-auth) --- .../layout/panel/workspace-content-panel.tsx | 14 +- editor/pages/_app.tsx | 2 +- editor/pages/live/index.tsx | 157 ++++++++++++++++-- 3 files changed, 155 insertions(+), 18 deletions(-) diff --git a/editor/layout/panel/workspace-content-panel.tsx b/editor/layout/panel/workspace-content-panel.tsx index 76fae7184..1945b4ca4 100644 --- a/editor/layout/panel/workspace-content-panel.tsx +++ b/editor/layout/panel/workspace-content-panel.tsx @@ -6,12 +6,18 @@ import React from "react"; * @param props * @returns */ -export function WorkspaceContentPanel(props: { children: JSX.Element }) { - return <Container>{props.children}</Container>; +export function WorkspaceContentPanel({ + children, + disableBorder = false, +}: { + children: JSX.Element; + disableBorder?: boolean; +}) { + return <Container disableBorder={disableBorder}>{children}</Container>; } -const Container = styled.div` - border: solid #d2d2d2; +const Container = styled.div<{ disableBorder: boolean }>` + border: ${(p) => (p.disableBorder ? "none" : "solid #d2d2d2")}; border-width: 1px; align-self: stretch; flex: 1; diff --git a/editor/pages/_app.tsx b/editor/pages/_app.tsx index c1bfa8630..e281dadac 100644 --- a/editor/pages/_app.tsx +++ b/editor/pages/_app.tsx @@ -11,7 +11,7 @@ function GlobalCss() { body { margin: 0px; padding: 0; - font-family: "Roboto", sans-serif; + font-family: "Helvetica Nueue", "Roboto", sans-serif; } iframe { border: none; diff --git a/editor/pages/live/index.tsx b/editor/pages/live/index.tsx index 0c5e5c5c1..121ffa5b4 100644 --- a/editor/pages/live/index.tsx +++ b/editor/pages/live/index.tsx @@ -1,9 +1,28 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import Pusher from "pusher-js"; -import { useState } from "react"; -import { useEffect } from "react"; import LoadingLayout from "../../layout/loading-overlay"; import { useDesign } from "../../hooks"; +import { designToCode, Result } from "@designto/code"; +import { TargetNodeConfig } from "../../query/target-node"; +import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout"; +import { + WorkspaceContentPanel, + WorkspaceContentPanelGridLayout, +} from "../../layout/panel"; +import { PreviewAndRunPanel } from "../../components/preview-and-run"; +import { CodeEditor } from "../../components/code-editor"; +import { + ImageRepository, + MainImageRepository, +} from "@design-sdk/core/assets-repository"; +import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repository/image-repository"; +import { DesignInput } from "@designto/config/input"; +import { config, FrameworkConfig, output } from "@designto/config"; +import { + react_presets, + flutter_presets, + vanilla_presets, +} from "@grida/builder-config-preset"; const _base_url = "https://ahzdf5x4q3.execute-api.us-west-1.amazonaws.com/production"; // "https://assistant-live-session.grida.cc"; @@ -20,28 +39,25 @@ export default function LiveSessionPage() { const [filekey, setFilekey] = useState<string>(); const [nodeid, setNodeid] = useState<string>(); - const design = useDesign({ - type: "use-file-node-id", - file: filekey, - node: nodeid, - }); - useEffect(() => { // TODO: - add auth guard // subscribe once wheb the page is loaded const subscription = pusher.subscribe("private-live-session"); // channel subscription.bind("client-select", (d) => { + console.log(d); setLastmessage(JSON.stringify(d)); + setFilekey(d.filekey); + setNodeid(d.node); }); }, []); return ( - <div style={{ margin: 24 }}> + <div> {lastmessage ? ( - <> - <p>{lastmessage}</p> - </> + <div key={filekey + nodeid}> + <DesignProxyPage file={filekey} node={nodeid} /> + </div> ) : ( <> <LoadingLayout @@ -53,3 +69,118 @@ export default function LiveSessionPage() { </div> ); } + +function DesignProxyPage({ file, node }: { file: string; node: string }) { + const design = useDesign({ + type: "use-file-node-id", + file: file, + node: node, + use_session_cache: true, + }); + + console.log("design", design); + + if (design) { + return <ResultProxyPage design={design} />; + } else { + return <LoadingLayout />; + } +} + +function ResultProxyPage({ design }: { design: TargetNodeConfig }) { + const [result, setResult] = useState<Result>(); + const [preview, setPreview] = useState<Result>(); + + const framework_config = react_presets.react_default; + const preview_runner_framework = vanilla_presets.vanilla_default; + + useEffect(() => { + const { reflect, raw } = design; + const { id, name } = reflect; + // ------------------------------------------------------------ + // other platforms are not supported yet + // set image repo for figma platform + MainImageRepository.instance = new RemoteImageRepositories(design.file); + MainImageRepository.instance.register( + new ImageRepository( + "fill-later-assets", + "grida://assets-reservation/images/" + ) + ); + // ------------------------------------------------------------ + designToCode({ + input: DesignInput.fromApiResponse({ entry: reflect, raw }), + framework: framework_config, + asset_config: { asset_repository: MainImageRepository.instance }, + build_config: { + ...config.default_build_configuration, + disable_components: true, + }, + }).then((result) => { + setResult(result); + setPreview(result); + }); + // ----- for preview ----- + designToCode({ + input: { + id: id, + name: name, + entry: reflect, + }, + build_config: { + ...config.default_build_configuration, + disable_components: true, + }, + framework: preview_runner_framework, + asset_config: { asset_repository: MainImageRepository.instance }, + }).then((result) => { + setPreview(result); + }); + }, []); + + if (!result || !preview) { + return <LoadingLayout />; + } + + const { code, scaffold, name: componentName } = result; + + return ( + <WorkspaceContentPanelGridLayout> + <WorkspaceContentPanel disableBorder> + <PreviewAndRunPanel + key={design.url ?? design.reflect?.id} + config={{ + src: preview.scaffold.raw, + platform: preview_runner_framework.framework, + componentName: componentName, + sceneSize: { + w: design.reflect?.width, + h: design.reflect?.height, + }, + initialMode: "run", + fileid: design.file, + sceneid: design.node, + }} + /> + </WorkspaceContentPanel> + <WorkspaceContentPanel key={design.node} disableBorder> + <CodeEditor + // key={code.raw} + height="100vh" + options={{ + automaticLayout: true, + }} + files={{ + "index.tsx": { + raw: code + ? code.raw + : "// No input design provided to be converted..", + language: framework_config.language, + name: "index.tsx", + }, + }} + /> + </WorkspaceContentPanel> + </WorkspaceContentPanelGridLayout> + ); +} From 3cbfddfcbfb29c4cc4f282b4f36b88899beb2324 Mon Sep 17 00:00:00 2001 From: softmarshmallow <woojoo@softmarshmallow.com> Date: Tue, 2 Nov 2021 15:51:27 +0900 Subject: [PATCH 7/9] fix preview loading --- editor/pages/live/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/editor/pages/live/index.tsx b/editor/pages/live/index.tsx index 121ffa5b4..2c863d4be 100644 --- a/editor/pages/live/index.tsx +++ b/editor/pages/live/index.tsx @@ -118,7 +118,6 @@ function ResultProxyPage({ design }: { design: TargetNodeConfig }) { }, }).then((result) => { setResult(result); - setPreview(result); }); // ----- for preview ----- designToCode({ @@ -143,7 +142,7 @@ function ResultProxyPage({ design }: { design: TargetNodeConfig }) { } const { code, scaffold, name: componentName } = result; - + console.log("preview", preview); return ( <WorkspaceContentPanelGridLayout> <WorkspaceContentPanel disableBorder> From 256a7736902740d0ce8d3ea0bb103b597ab16cee Mon Sep 17 00:00:00 2001 From: softmarshmallow <woojoo@softmarshmallow.com> Date: Wed, 3 Nov 2021 00:40:27 +0900 Subject: [PATCH 8/9] cleanup monaco --- editor/components/code-editor/monaco.tsx | 5 - editor/components/code-editor/react.d.ts.txt | 3283 ------------------ 2 files changed, 3288 deletions(-) delete mode 100644 editor/components/code-editor/react.d.ts.txt diff --git a/editor/components/code-editor/monaco.tsx b/editor/components/code-editor/monaco.tsx index 2e176445c..f372b9ed7 100644 --- a/editor/components/code-editor/monaco.tsx +++ b/editor/components/code-editor/monaco.tsx @@ -1,7 +1,6 @@ import React, { useEffect } from "react"; import Editor, { useMonaco, Monaco } from "@monaco-editor/react"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; -import _react_type_def_txt from "./react.d.ts.txt"; export interface MonacoEditorProps { defaultValue?: string; @@ -63,10 +62,6 @@ function setup_react_support(monaco: Monaco) { noSemanticValidation: false, noSyntaxValidation: false, }); - - monaco.languages.typescript.typescriptDefaults.addExtraLib( - _react_type_def_txt - ); } export { useMonaco } from "@monaco-editor/react"; diff --git a/editor/components/code-editor/react.d.ts.txt b/editor/components/code-editor/react.d.ts.txt deleted file mode 100644 index 706f695a4..000000000 --- a/editor/components/code-editor/react.d.ts.txt +++ /dev/null @@ -1,3283 +0,0 @@ -// Type definitions for React 17.0 -// Project: http://facebook.github.io/react/ -// Definitions by: Asana <https://asana.com> -// AssureSign <http://www.assuresign.com> -// Microsoft <https://microsoft.com> -// John Reilly <https://github.com/johnnyreilly> -// Benoit Benezech <https://github.com/bbenezech> -// Patricio Zavolinsky <https://github.com/pzavolinsky> -// Eric Anderson <https://github.com/ericanderson> -// Dovydas Navickas <https://github.com/DovydasNavickas> -// Josh Rutherford <https://github.com/theruther4d> -// Guilherme Hübner <https://github.com/guilhermehubner> -// Ferdy Budhidharma <https://github.com/ferdaber> -// Johann Rakotoharisoa <https://github.com/jrakotoharisoa> -// Olivier Pascal <https://github.com/pascaloliv> -// Martin Hochel <https://github.com/hotell> -// Frank Li <https://github.com/franklixuefei> -// Jessica Franco <https://github.com/Jessidhia> -// Saransh Kataria <https://github.com/saranshkataria> -// Kanitkorn Sujautra <https://github.com/lukyth> -// Sebastian Silbermann <https://github.com/eps1lon> -// Kyle Scully <https://github.com/zieka> -// Cong Zhang <https://github.com/dancerphil> -// Dimitri Mitropoulos <https://github.com/dimitropoulos> -// JongChan Choi <https://github.com/disjukr> -// Victor Magalhães <https://github.com/vhfmag> -// Dale Tan <https://github.com/hellatan> -// Priyanshu Rav <https://github.com/priyanshurav> -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.8 - -// NOTE: Users of the upcoming React 18 release should add a reference -// to 'react/next' in their project. See next.d.ts's top comment -// for reference and documentation on how exactly to do it. - -// NOTE: Users of the `experimental` builds of React should add a reference -// to 'react/experimental' in their project. See experimental.d.ts's top comment -// for reference and documentation on how exactly to do it. - -/// <reference path="global.d.ts" /> - -import * as CSS from 'csstype'; -import * as PropTypes from 'prop-types'; -import { Interaction as SchedulerInteraction } from 'scheduler/tracing'; - -type NativeAnimationEvent = AnimationEvent; -type NativeClipboardEvent = ClipboardEvent; -type NativeCompositionEvent = CompositionEvent; -type NativeDragEvent = DragEvent; -type NativeFocusEvent = FocusEvent; -type NativeKeyboardEvent = KeyboardEvent; -type NativeMouseEvent = MouseEvent; -type NativeTouchEvent = TouchEvent; -type NativePointerEvent = PointerEvent; -type NativeTransitionEvent = TransitionEvent; -type NativeUIEvent = UIEvent; -type NativeWheelEvent = WheelEvent; -type Booleanish = boolean | 'true' | 'false'; - -declare const UNDEFINED_VOID_ONLY: unique symbol; -// Destructors are only allowed to return void. -type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never }; - -// tslint:disable-next-line:export-just-namespace -export = React; -export as namespace React; - -declare namespace React { - // - // React Elements - // ---------------------------------------------------------------------- - - type ElementType<P = any> = - { - [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never - }[keyof JSX.IntrinsicElements] | - ComponentType<P>; - /** - * @deprecated Please use `ElementType` - */ - type ReactType<P = any> = ElementType<P>; - type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>; - - type JSXElementConstructor<P> = - | ((props: P) => ReactElement<any, any> | null) - | (new (props: P) => Component<P, any>); - - interface RefObject<T> { - readonly current: T | null; - } - type RefCallback<T> = { bivarianceHack(instance: T | null): void }["bivarianceHack"]; - type Ref<T> = RefCallback<T> | RefObject<T> | null; - type LegacyRef<T> = string | Ref<T>; - /** - * Gets the instance type for a React element. The instance will be different for various component types: - * - * - React class components will be the class instance. So if you had `class Foo extends React.Component<{}> {}` - * and used `React.ElementRef<typeof Foo>` then the type would be the instance of `Foo`. - * - React stateless functional components do not have a backing instance and so `React.ElementRef<typeof Bar>` - * (when `Bar` is `function Bar() {}`) will give you the `undefined` type. - * - JSX intrinsics like `div` will give you their DOM instance. For `React.ElementRef<'div'>` that would be - * `HTMLDivElement`. For `React.ElementRef<'input'>` that would be `HTMLInputElement`. - * - React stateless functional components that forward a `ref` will give you the `ElementRef` of the forwarded - * to component. - * - * `C` must be the type _of_ a React component so you need to use typeof as in React.ElementRef<typeof MyComponent>. - * - * @todo In Flow, this works a little different with forwarded refs and the `AbstractComponent` that - * `React.forwardRef()` returns. - */ - type ElementRef< - C extends - | ForwardRefExoticComponent<any> - | { new (props: any): Component<any> } - | ((props: any, context?: any) => ReactElement | null) - | keyof JSX.IntrinsicElements - > = - // need to check first if `ref` is a valid prop for ts@3.0 - // otherwise it will infer `{}` instead of `never` - "ref" extends keyof ComponentPropsWithRef<C> - ? NonNullable<ComponentPropsWithRef<C>["ref"]> extends Ref< - infer Instance - > - ? Instance - : never - : never; - - type ComponentState = any; - - type Key = string | number; - - /** - * @internal You shouldn't need to use this type since you never see these attributes - * inside your component or have to validate them. - */ - interface Attributes { - key?: Key | null | undefined; - } - interface RefAttributes<T> extends Attributes { - ref?: Ref<T> | undefined; - } - interface ClassAttributes<T> extends Attributes { - ref?: LegacyRef<T> | undefined; - } - - interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> { - type: T; - props: P; - key: Key | null; - } - - interface ReactComponentElement< - T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>, - P = Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, 'key' | 'ref'>> - > extends ReactElement<P, Exclude<T, number>> { } - - /** - * @deprecated Please use `FunctionComponentElement` - */ - type SFCElement<P> = FunctionComponentElement<P>; - - interface FunctionComponentElement<P> extends ReactElement<P, FunctionComponent<P>> { - ref?: ('ref' extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined; - } - - type CElement<P, T extends Component<P, ComponentState>> = ComponentElement<P, T>; - interface ComponentElement<P, T extends Component<P, ComponentState>> extends ReactElement<P, ComponentClass<P>> { - ref?: LegacyRef<T> | undefined; - } - - type ClassicElement<P> = CElement<P, ClassicComponent<P, ComponentState>>; - - // string fallback for custom web-components - interface DOMElement<P extends HTMLAttributes<T> | SVGAttributes<T>, T extends Element> extends ReactElement<P, string> { - ref: LegacyRef<T>; - } - - // ReactHTML for ReactHTMLElement - interface ReactHTMLElement<T extends HTMLElement> extends DetailedReactHTMLElement<AllHTMLAttributes<T>, T> { } - - interface DetailedReactHTMLElement<P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMElement<P, T> { - type: keyof ReactHTML; - } - - // ReactSVG for ReactSVGElement - interface ReactSVGElement extends DOMElement<SVGAttributes<SVGElement>, SVGElement> { - type: keyof ReactSVG; - } - - interface ReactPortal extends ReactElement { - key: Key | null; - children: ReactNode; - } - - // - // Factories - // ---------------------------------------------------------------------- - - type Factory<P> = (props?: Attributes & P, ...children: ReactNode[]) => ReactElement<P>; - - /** - * @deprecated Please use `FunctionComponentFactory` - */ - type SFCFactory<P> = FunctionComponentFactory<P>; - - type FunctionComponentFactory<P> = (props?: Attributes & P, ...children: ReactNode[]) => FunctionComponentElement<P>; - - type ComponentFactory<P, T extends Component<P, ComponentState>> = - (props?: ClassAttributes<T> & P, ...children: ReactNode[]) => CElement<P, T>; - - type CFactory<P, T extends Component<P, ComponentState>> = ComponentFactory<P, T>; - type ClassicFactory<P> = CFactory<P, ClassicComponent<P, ComponentState>>; - - type DOMFactory<P extends DOMAttributes<T>, T extends Element> = - (props?: ClassAttributes<T> & P | null, ...children: ReactNode[]) => DOMElement<P, T>; - - interface HTMLFactory<T extends HTMLElement> extends DetailedHTMLFactory<AllHTMLAttributes<T>, T> {} - - interface DetailedHTMLFactory<P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMFactory<P, T> { - (props?: ClassAttributes<T> & P | null, ...children: ReactNode[]): DetailedReactHTMLElement<P, T>; - } - - interface SVGFactory extends DOMFactory<SVGAttributes<SVGElement>, SVGElement> { - (props?: ClassAttributes<SVGElement> & SVGAttributes<SVGElement> | null, ...children: ReactNode[]): ReactSVGElement; - } - - // - // React Nodes - // http://facebook.github.io/react/docs/glossary.html - // ---------------------------------------------------------------------- - - type ReactText = string | number; - type ReactChild = ReactElement | ReactText; - - interface ReactNodeArray extends Array<ReactNode> {} - type ReactFragment = {} | ReactNodeArray; - type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined; - - // - // Top Level API - // ---------------------------------------------------------------------- - - // DOM Elements - function createFactory<T extends HTMLElement>( - type: keyof ReactHTML): HTMLFactory<T>; - function createFactory( - type: keyof ReactSVG): SVGFactory; - function createFactory<P extends DOMAttributes<T>, T extends Element>( - type: string): DOMFactory<P, T>; - - // Custom components - function createFactory<P>(type: FunctionComponent<P>): FunctionComponentFactory<P>; - function createFactory<P>( - type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>): CFactory<P, ClassicComponent<P, ComponentState>>; - function createFactory<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>>( - type: ClassType<P, T, C>): CFactory<P, T>; - function createFactory<P>(type: ComponentClass<P>): Factory<P>; - - // DOM Elements - // TODO: generalize this to everything in `keyof ReactHTML`, not just "input" - function createElement( - type: "input", - props?: InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement> | null, - ...children: ReactNode[]): DetailedReactHTMLElement<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>; - function createElement<P extends HTMLAttributes<T>, T extends HTMLElement>( - type: keyof ReactHTML, - props?: ClassAttributes<T> & P | null, - ...children: ReactNode[]): DetailedReactHTMLElement<P, T>; - function createElement<P extends SVGAttributes<T>, T extends SVGElement>( - type: keyof ReactSVG, - props?: ClassAttributes<T> & P | null, - ...children: ReactNode[]): ReactSVGElement; - function createElement<P extends DOMAttributes<T>, T extends Element>( - type: string, - props?: ClassAttributes<T> & P | null, - ...children: ReactNode[]): DOMElement<P, T>; - - // Custom components - - function createElement<P extends {}>( - type: FunctionComponent<P>, - props?: Attributes & P | null, - ...children: ReactNode[]): FunctionComponentElement<P>; - function createElement<P extends {}>( - type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>, - props?: ClassAttributes<ClassicComponent<P, ComponentState>> & P | null, - ...children: ReactNode[]): CElement<P, ClassicComponent<P, ComponentState>>; - function createElement<P extends {}, T extends Component<P, ComponentState>, C extends ComponentClass<P>>( - type: ClassType<P, T, C>, - props?: ClassAttributes<T> & P | null, - ...children: ReactNode[]): CElement<P, T>; - function createElement<P extends {}>( - type: FunctionComponent<P> | ComponentClass<P> | string, - props?: Attributes & P | null, - ...children: ReactNode[]): ReactElement<P>; - - // DOM Elements - // ReactHTMLElement - function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>( - element: DetailedReactHTMLElement<P, T>, - props?: P, - ...children: ReactNode[]): DetailedReactHTMLElement<P, T>; - // ReactHTMLElement, less specific - function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>( - element: ReactHTMLElement<T>, - props?: P, - ...children: ReactNode[]): ReactHTMLElement<T>; - // SVGElement - function cloneElement<P extends SVGAttributes<T>, T extends SVGElement>( - element: ReactSVGElement, - props?: P, - ...children: ReactNode[]): ReactSVGElement; - // DOM Element (has to be the last, because type checking stops at first overload that fits) - function cloneElement<P extends DOMAttributes<T>, T extends Element>( - element: DOMElement<P, T>, - props?: DOMAttributes<T> & P, - ...children: ReactNode[]): DOMElement<P, T>; - - // Custom components - function cloneElement<P>( - element: FunctionComponentElement<P>, - props?: Partial<P> & Attributes, - ...children: ReactNode[]): FunctionComponentElement<P>; - function cloneElement<P, T extends Component<P, ComponentState>>( - element: CElement<P, T>, - props?: Partial<P> & ClassAttributes<T>, - ...children: ReactNode[]): CElement<P, T>; - function cloneElement<P>( - element: ReactElement<P>, - props?: Partial<P> & Attributes, - ...children: ReactNode[]): ReactElement<P>; - - // Context via RenderProps - interface ProviderProps<T> { - value: T; - children?: ReactNode | undefined; - } - - interface ConsumerProps<T> { - children: (value: T) => ReactNode; - } - - // TODO: similar to how Fragment is actually a symbol, the values returned from createContext, - // forwardRef and memo are actually objects that are treated specially by the renderer; see: - // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/ReactContext.js#L35-L48 - // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/forwardRef.js#L42-L45 - // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/memo.js#L27-L31 - // However, we have no way of telling the JSX parser that it's a JSX element type or its props other than - // by pretending to be a normal component. - // - // We don't just use ComponentType or SFC types because you are not supposed to attach statics to this - // object, but rather to the original function. - interface ExoticComponent<P = {}> { - /** - * **NOTE**: Exotic components are not callable. - */ - (props: P): (ReactElement|null); - readonly $$typeof: symbol; - } - - interface NamedExoticComponent<P = {}> extends ExoticComponent<P> { - displayName?: string | undefined; - } - - interface ProviderExoticComponent<P> extends ExoticComponent<P> { - propTypes?: WeakValidationMap<P> | undefined; - } - - type ContextType<C extends Context<any>> = C extends Context<infer T> ? T : never; - - // NOTE: only the Context object itself can get a displayName - // https://github.com/facebook/react-devtools/blob/e0b854e4c/backend/attachRendererFiber.js#L310-L325 - type Provider<T> = ProviderExoticComponent<ProviderProps<T>>; - type Consumer<T> = ExoticComponent<ConsumerProps<T>>; - interface Context<T> { - Provider: Provider<T>; - Consumer: Consumer<T>; - displayName?: string | undefined; - } - function createContext<T>( - // If you thought this should be optional, see - // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106 - defaultValue: T, - ): Context<T>; - - function isValidElement<P>(object: {} | null | undefined): object is ReactElement<P>; - - const Children: ReactChildren; - const Fragment: ExoticComponent<{ children?: ReactNode | undefined }>; - const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>; - - interface SuspenseProps { - children?: ReactNode | undefined; - - /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */ - fallback: NonNullable<ReactNode>|null; - } - /** - * This feature is not yet available for server-side rendering. - * Suspense support will be added in a later release. - */ - const Suspense: ExoticComponent<SuspenseProps>; - const version: string; - - /** - * {@link https://reactjs.org/docs/profiler.html#onrender-callback Profiler API} - */ - type ProfilerOnRenderCallback = ( - id: string, - phase: "mount" | "update", - actualDuration: number, - baseDuration: number, - startTime: number, - commitTime: number, - interactions: Set<SchedulerInteraction>, - ) => void; - interface ProfilerProps { - children?: ReactNode | undefined; - id: string; - onRender: ProfilerOnRenderCallback; - } - - const Profiler: ExoticComponent<ProfilerProps>; - - // - // Component API - // ---------------------------------------------------------------------- - - type ReactInstance = Component<any> | Element; - - // Base component for plain JS classes - interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> { } - class Component<P, S> { - // tslint won't let me format the sample code in a way that vscode likes it :( - /** - * If set, `this.context` will be set at runtime to the current value of the given Context. - * - * Usage: - * - * ```ts - * type MyContext = number - * const Ctx = React.createContext<MyContext>(0) - * - * class Foo extends React.Component { - * static contextType = Ctx - * context!: React.ContextType<typeof Ctx> - * render () { - * return <>My context's value: {this.context}</>; - * } - * } - * ``` - * - * @see https://reactjs.org/docs/context.html#classcontexttype - */ - static contextType?: Context<any> | undefined; - - /** - * If using the new style context, re-declare this in your class to be the - * `React.ContextType` of your `static contextType`. - * Should be used with type annotation or static contextType. - * - * ```ts - * static contextType = MyContext - * // For TS pre-3.7: - * context!: React.ContextType<typeof MyContext> - * // For TS 3.7 and above: - * declare context: React.ContextType<typeof MyContext> - * ``` - * - * @see https://reactjs.org/docs/context.html - */ - // TODO (TypeScript 3.0): unknown - context: any; - - constructor(props: Readonly<P> | P); - /** - * @deprecated - * @see https://reactjs.org/docs/legacy-context.html - */ - constructor(props: P, context: any); - - // We MUST keep setState() as a unified signature because it allows proper checking of the method return type. - // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257 - // Also, the ` | S` allows intellisense to not be dumbisense - setState<K extends keyof S>( - state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null), - callback?: () => void - ): void; - - forceUpdate(callback?: () => void): void; - render(): ReactNode; - - // React.Props<T> is now deprecated, which means that the `children` - // property is not available on `P` by default, even though you can - // always pass children as variadic arguments to `createElement`. - // In the future, if we can define its call signature conditionally - // on the existence of `children` in `P`, then we should remove this. - readonly props: Readonly<P> & Readonly<{ children?: ReactNode | undefined }>; - state: Readonly<S>; - /** - * @deprecated - * https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs - */ - refs: { - [key: string]: ReactInstance - }; - } - - class PureComponent<P = {}, S = {}, SS = any> extends Component<P, S, SS> { } - - interface ClassicComponent<P = {}, S = {}> extends Component<P, S> { - replaceState(nextState: S, callback?: () => void): void; - isMounted(): boolean; - getInitialState?(): S; - } - - interface ChildContextProvider<CC> { - getChildContext(): CC; - } - - // - // Class Interfaces - // ---------------------------------------------------------------------- - - /** - * @deprecated as of recent React versions, function components can no - * longer be considered 'stateless'. Please use `FunctionComponent` instead. - * - * @see [React Hooks](https://reactjs.org/docs/hooks-intro.html) - */ - type SFC<P = {}> = FunctionComponent<P>; - - /** - * @deprecated as of recent React versions, function components can no - * longer be considered 'stateless'. Please use `FunctionComponent` instead. - * - * @see [React Hooks](https://reactjs.org/docs/hooks-intro.html) - */ - type StatelessComponent<P = {}> = FunctionComponent<P>; - - type FC<P = {}> = FunctionComponent<P>; - - interface FunctionComponent<P = {}> { - (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null; - propTypes?: WeakValidationMap<P> | undefined; - contextTypes?: ValidationMap<any> | undefined; - defaultProps?: Partial<P> | undefined; - displayName?: string | undefined; - } - - type VFC<P = {}> = VoidFunctionComponent<P>; - - interface VoidFunctionComponent<P = {}> { - (props: P, context?: any): ReactElement<any, any> | null; - propTypes?: WeakValidationMap<P> | undefined; - contextTypes?: ValidationMap<any> | undefined; - defaultProps?: Partial<P> | undefined; - displayName?: string | undefined; - } - - type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null; - - interface ForwardRefRenderFunction<T, P = {}> { - (props: PropsWithChildren<P>, ref: ForwardedRef<T>): ReactElement | null; - displayName?: string | undefined; - // explicit rejected with `never` required due to - // https://github.com/microsoft/TypeScript/issues/36826 - /** - * defaultProps are not supported on render functions - */ - defaultProps?: never | undefined; - /** - * propTypes are not supported on render functions - */ - propTypes?: never | undefined; - } - - /** - * @deprecated Use ForwardRefRenderFunction. forwardRef doesn't accept a - * "real" component. - */ - interface RefForwardingComponent <T, P = {}> extends ForwardRefRenderFunction<T, P> {} - - interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> { - new (props: P, context?: any): Component<P, S>; - propTypes?: WeakValidationMap<P> | undefined; - contextType?: Context<any> | undefined; - contextTypes?: ValidationMap<any> | undefined; - childContextTypes?: ValidationMap<any> | undefined; - defaultProps?: Partial<P> | undefined; - displayName?: string | undefined; - } - - interface ClassicComponentClass<P = {}> extends ComponentClass<P> { - new (props: P, context?: any): ClassicComponent<P, ComponentState>; - getDefaultProps?(): P; - } - - /** - * We use an intersection type to infer multiple type parameters from - * a single argument, which is useful for many top-level API defs. - * See https://github.com/Microsoft/TypeScript/issues/7234 for more info. - */ - type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> = - C & - (new (props: P, context?: any) => T); - - // - // Component Specs and Lifecycle - // ---------------------------------------------------------------------- - - // This should actually be something like `Lifecycle<P, S> | DeprecatedLifecycle<P, S>`, - // as React will _not_ call the deprecated lifecycle methods if any of the new lifecycle - // methods are present. - interface ComponentLifecycle<P, S, SS = any> extends NewLifecycle<P, S, SS>, DeprecatedLifecycle<P, S> { - /** - * Called immediately after a component is mounted. Setting state here will trigger re-rendering. - */ - componentDidMount?(): void; - /** - * Called to determine whether the change in props and state should trigger a re-render. - * - * `Component` always returns true. - * `PureComponent` implements a shallow comparison on props and state and returns true if any - * props or states have changed. - * - * If false is returned, `Component#render`, `componentWillUpdate` - * and `componentDidUpdate` will not be called. - */ - shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean; - /** - * Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as - * cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`. - */ - componentWillUnmount?(): void; - /** - * Catches exceptions generated in descendant components. Unhandled exceptions will cause - * the entire component tree to unmount. - */ - componentDidCatch?(error: Error, errorInfo: ErrorInfo): void; - } - - // Unfortunately, we have no way of declaring that the component constructor must implement this - interface StaticLifecycle<P, S> { - getDerivedStateFromProps?: GetDerivedStateFromProps<P, S> | undefined; - getDerivedStateFromError?: GetDerivedStateFromError<P, S> | undefined; - } - - type GetDerivedStateFromProps<P, S> = - /** - * Returns an update to a component's state based on its new props and old state. - * - * Note: its presence prevents any of the deprecated lifecycle methods from being invoked - */ - (nextProps: Readonly<P>, prevState: S) => Partial<S> | null; - - type GetDerivedStateFromError<P, S> = - /** - * This lifecycle is invoked after an error has been thrown by a descendant component. - * It receives the error that was thrown as a parameter and should return a value to update state. - * - * Note: its presence prevents any of the deprecated lifecycle methods from being invoked - */ - (error: any) => Partial<S> | null; - - // This should be "infer SS" but can't use it yet - interface NewLifecycle<P, S, SS> { - /** - * Runs before React applies the result of `render` to the document, and - * returns an object to be given to componentDidUpdate. Useful for saving - * things such as scroll position before `render` causes changes to it. - * - * Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated - * lifecycle events from running. - */ - getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>): SS | null; - /** - * Called immediately after updating occurs. Not called for the initial render. - * - * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null. - */ - componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot?: SS): void; - } - - interface DeprecatedLifecycle<P, S> { - /** - * Called immediately before mounting occurs, and before `Component#render`. - * Avoid introducing any side-effects or subscriptions in this method. - * - * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - * prevents this from being invoked. - * - * @deprecated 16.3, use componentDidMount or the constructor instead; will stop working in React 17 - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path - */ - componentWillMount?(): void; - /** - * Called immediately before mounting occurs, and before `Component#render`. - * Avoid introducing any side-effects or subscriptions in this method. - * - * This method will not stop working in React 17. - * - * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - * prevents this from being invoked. - * - * @deprecated 16.3, use componentDidMount or the constructor instead - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path - */ - UNSAFE_componentWillMount?(): void; - /** - * Called when the component may be receiving new props. - * React may call this even if props have not changed, so be sure to compare new and existing - * props if you only want to handle changes. - * - * Calling `Component#setState` generally does not trigger this method. - * - * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - * prevents this from being invoked. - * - * @deprecated 16.3, use static getDerivedStateFromProps instead; will stop working in React 17 - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path - */ - componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void; - /** - * Called when the component may be receiving new props. - * React may call this even if props have not changed, so be sure to compare new and existing - * props if you only want to handle changes. - * - * Calling `Component#setState` generally does not trigger this method. - * - * This method will not stop working in React 17. - * - * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - * prevents this from being invoked. - * - * @deprecated 16.3, use static getDerivedStateFromProps instead - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path - */ - UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void; - /** - * Called immediately before rendering when new props or state is received. Not called for the initial render. - * - * Note: You cannot call `Component#setState` here. - * - * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - * prevents this from being invoked. - * - * @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17 - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path - */ - componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void; - /** - * Called immediately before rendering when new props or state is received. Not called for the initial render. - * - * Note: You cannot call `Component#setState` here. - * - * This method will not stop working in React 17. - * - * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - * prevents this from being invoked. - * - * @deprecated 16.3, use getSnapshotBeforeUpdate instead - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update - * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path - */ - UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void; - } - - interface Mixin<P, S> extends ComponentLifecycle<P, S> { - mixins?: Array<Mixin<P, S>> | undefined; - statics?: { - [key: string]: any; - } | undefined; - - displayName?: string | undefined; - propTypes?: ValidationMap<any> | undefined; - contextTypes?: ValidationMap<any> | undefined; - childContextTypes?: ValidationMap<any> | undefined; - - getDefaultProps?(): P; - getInitialState?(): S; - } - - interface ComponentSpec<P, S> extends Mixin<P, S> { - render(): ReactNode; - - [propertyName: string]: any; - } - - function createRef<T>(): RefObject<T>; - - // will show `ForwardRef(${Component.displayName || Component.name})` in devtools by default, - // but can be given its own specific name - interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> { - defaultProps?: Partial<P> | undefined; - propTypes?: WeakValidationMap<P> | undefined; - } - - function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>; - - /** Ensures that the props do not include ref at all */ - type PropsWithoutRef<P> = - // Pick would not be sufficient for this. We'd like to avoid unnecessary mapping and need a distributive conditional to support unions. - // see: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types - // https://github.com/Microsoft/TypeScript/issues/28339 - P extends any ? ('ref' extends keyof P ? Pick<P, Exclude<keyof P, 'ref'>> : P) : P; - /** Ensures that the props do not include string ref, which cannot be forwarded */ - type PropsWithRef<P> = - // Just "P extends { ref?: infer R }" looks sufficient, but R will infer as {} if P is {}. - 'ref' extends keyof P - ? P extends { ref?: infer R | undefined } - ? string extends R - ? PropsWithoutRef<P> & { ref?: Exclude<R, string> | undefined } - : P - : P - : P; - - type PropsWithChildren<P> = P & { children?: ReactNode | undefined }; - - /** - * NOTE: prefer ComponentPropsWithRef, if the ref is forwarded, - * or ComponentPropsWithoutRef when refs are not supported. - */ - type ComponentProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = - T extends JSXElementConstructor<infer P> - ? P - : T extends keyof JSX.IntrinsicElements - ? JSX.IntrinsicElements[T] - : {}; - type ComponentPropsWithRef<T extends ElementType> = - T extends ComponentClass<infer P> - ? PropsWithoutRef<P> & RefAttributes<InstanceType<T>> - : PropsWithRef<ComponentProps<T>>; - type ComponentPropsWithoutRef<T extends ElementType> = - PropsWithoutRef<ComponentProps<T>>; - - type ComponentRef<T extends ElementType> = T extends NamedExoticComponent< - ComponentPropsWithoutRef<T> & RefAttributes<infer Method> - > - ? Method - : ComponentPropsWithRef<T> extends RefAttributes<infer Method> - ? Method - : never; - - // will show `Memo(${Component.displayName || Component.name})` in devtools by default, - // but can be given its own specific name - type MemoExoticComponent<T extends ComponentType<any>> = NamedExoticComponent<ComponentPropsWithRef<T>> & { - readonly type: T; - }; - - function memo<P extends object>( - Component: SFC<P>, - propsAreEqual?: (prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>>) => boolean - ): NamedExoticComponent<P>; - function memo<T extends ComponentType<any>>( - Component: T, - propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean - ): MemoExoticComponent<T>; - - type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & { - readonly _result: T; - }; - - function lazy<T extends ComponentType<any>>( - factory: () => Promise<{ default: T }> - ): LazyExoticComponent<T>; - - // - // React Hooks - // ---------------------------------------------------------------------- - - // based on the code in https://github.com/facebook/react/pull/13968 - - // Unlike the class component setState, the updates are not allowed to be partial - type SetStateAction<S> = S | ((prevState: S) => S); - // this technically does accept a second argument, but it's already under a deprecation warning - // and it's not even released so probably better to not define it. - type Dispatch<A> = (value: A) => void; - // Since action _can_ be undefined, dispatch may be called without any parameters. - type DispatchWithoutAction = () => void; - // Unlike redux, the actions _can_ be anything - type Reducer<S, A> = (prevState: S, action: A) => S; - // If useReducer accepts a reducer without action, dispatch may be called without any parameters. - type ReducerWithoutAction<S> = (prevState: S) => S; - // types used to try and prevent the compiler from reducing S - // to a supertype common with the second argument to useReducer() - type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never; - type ReducerAction<R extends Reducer<any, any>> = R extends Reducer<any, infer A> ? A : never; - // The identity check is done with the SameValue algorithm (Object.is), which is stricter than === - type ReducerStateWithoutAction<R extends ReducerWithoutAction<any>> = - R extends ReducerWithoutAction<infer S> ? S : never; - // TODO (TypeScript 3.0): ReadonlyArray<unknown> - type DependencyList = ReadonlyArray<any>; - - // NOTE: callbacks are _only_ allowed to return either void, or a destructor. - type EffectCallback = () => (void | Destructor); - - interface MutableRefObject<T> { - current: T; - } - - // This will technically work if you give a Consumer<T> or Provider<T> but it's deprecated and warns - /** - * Accepts a context object (the value returned from `React.createContext`) and returns the current - * context value, as given by the nearest context provider for the given context. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#usecontext - */ - function useContext<T>(context: Context<T>/*, (not public API) observedBits?: number|boolean */): T; - /** - * Returns a stateful value, and a function to update it. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#usestate - */ - function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]; - // convenience overload when first argument is omitted - /** - * Returns a stateful value, and a function to update it. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#usestate - */ - function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>]; - /** - * An alternative to `useState`. - * - * `useReducer` is usually preferable to `useState` when you have complex state logic that involves - * multiple sub-values. It also lets you optimize performance for components that trigger deep - * updates because you can pass `dispatch` down instead of callbacks. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#usereducer - */ - // overload where dispatch could accept 0 arguments. - function useReducer<R extends ReducerWithoutAction<any>, I>( - reducer: R, - initializerArg: I, - initializer: (arg: I) => ReducerStateWithoutAction<R> - ): [ReducerStateWithoutAction<R>, DispatchWithoutAction]; - /** - * An alternative to `useState`. - * - * `useReducer` is usually preferable to `useState` when you have complex state logic that involves - * multiple sub-values. It also lets you optimize performance for components that trigger deep - * updates because you can pass `dispatch` down instead of callbacks. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#usereducer - */ - // overload where dispatch could accept 0 arguments. - function useReducer<R extends ReducerWithoutAction<any>>( - reducer: R, - initializerArg: ReducerStateWithoutAction<R>, - initializer?: undefined - ): [ReducerStateWithoutAction<R>, DispatchWithoutAction]; - /** - * An alternative to `useState`. - * - * `useReducer` is usually preferable to `useState` when you have complex state logic that involves - * multiple sub-values. It also lets you optimize performance for components that trigger deep - * updates because you can pass `dispatch` down instead of callbacks. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#usereducer - */ - // overload where "I" may be a subset of ReducerState<R>; used to provide autocompletion. - // If "I" matches ReducerState<R> exactly then the last overload will allow initializer to be omitted. - // the last overload effectively behaves as if the identity function (x => x) is the initializer. - function useReducer<R extends Reducer<any, any>, I>( - reducer: R, - initializerArg: I & ReducerState<R>, - initializer: (arg: I & ReducerState<R>) => ReducerState<R> - ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; - /** - * An alternative to `useState`. - * - * `useReducer` is usually preferable to `useState` when you have complex state logic that involves - * multiple sub-values. It also lets you optimize performance for components that trigger deep - * updates because you can pass `dispatch` down instead of callbacks. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#usereducer - */ - // overload for free "I"; all goes as long as initializer converts it into "ReducerState<R>". - function useReducer<R extends Reducer<any, any>, I>( - reducer: R, - initializerArg: I, - initializer: (arg: I) => ReducerState<R> - ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; - /** - * An alternative to `useState`. - * - * `useReducer` is usually preferable to `useState` when you have complex state logic that involves - * multiple sub-values. It also lets you optimize performance for components that trigger deep - * updates because you can pass `dispatch` down instead of callbacks. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#usereducer - */ - - // I'm not sure if I keep this 2-ary or if I make it (2,3)-ary; it's currently (2,3)-ary. - // The Flow types do have an overload for 3-ary invocation with undefined initializer. - - // NOTE: without the ReducerState indirection, TypeScript would reduce S to be the most common - // supertype between the reducer's return type and the initialState (or the initializer's return type), - // which would prevent autocompletion from ever working. - - // TODO: double-check if this weird overload logic is necessary. It is possible it's either a bug - // in older versions, or a regression in newer versions of the typescript completion service. - function useReducer<R extends Reducer<any, any>>( - reducer: R, - initialState: ReducerState<R>, - initializer?: undefined - ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; - /** - * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument - * (`initialValue`). The returned object will persist for the full lifetime of the component. - * - * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable - * value around similar to how you’d use instance fields in classes. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#useref - */ - function useRef<T>(initialValue: T): MutableRefObject<T>; - // convenience overload for refs given as a ref prop as they typically start with a null value - /** - * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument - * (`initialValue`). The returned object will persist for the full lifetime of the component. - * - * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable - * value around similar to how you’d use instance fields in classes. - * - * Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type - * of the generic argument. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#useref - */ - function useRef<T>(initialValue: T|null): RefObject<T>; - // convenience overload for potentially undefined initialValue / call with 0 arguments - // has a default to stop it from defaulting to {} instead - /** - * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument - * (`initialValue`). The returned object will persist for the full lifetime of the component. - * - * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable - * value around similar to how you’d use instance fields in classes. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#useref - */ - function useRef<T = undefined>(): MutableRefObject<T | undefined>; - /** - * The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations. - * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside - * `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint. - * - * Prefer the standard `useEffect` when possible to avoid blocking visual updates. - * - * If you’re migrating code from a class component, `useLayoutEffect` fires in the same phase as - * `componentDidMount` and `componentDidUpdate`. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect - */ - function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; - /** - * Accepts a function that contains imperative, possibly effectful code. - * - * @param effect Imperative function that can return a cleanup function - * @param deps If present, effect will only activate if the values in the list change. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#useeffect - */ - function useEffect(effect: EffectCallback, deps?: DependencyList): void; - // NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref<T> - /** - * `useImperativeHandle` customizes the instance value that is exposed to parent components when using - * `ref`. As always, imperative code using refs should be avoided in most cases. - * - * `useImperativeHandle` should be used with `React.forwardRef`. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle - */ - function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void; - // I made 'inputs' required here and in useMemo as there's no point to memoizing without the memoization key - // useCallback(X) is identical to just using X, useMemo(() => Y) is identical to just using Y. - /** - * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs` - * has changed. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#usecallback - */ - // TODO (TypeScript 3.0): <T extends (...args: never[]) => unknown> - function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T; - /** - * `useMemo` will only recompute the memoized value when one of the `deps` has changed. - * - * Usage note: if calling `useMemo` with a referentially stable function, also give it as the input in - * the second argument. - * - * ```ts - * function expensive () { ... } - * - * function Component () { - * const expensiveResult = useMemo(expensive, [expensive]) - * return ... - * } - * ``` - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#usememo - */ - // allow undefined, but don't make it optional as that is very likely a mistake - function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T; - /** - * `useDebugValue` can be used to display a label for custom hooks in React DevTools. - * - * NOTE: We don’t recommend adding debug values to every custom hook. - * It’s most valuable for custom hooks that are part of shared libraries. - * - * @version 16.8.0 - * @see https://reactjs.org/docs/hooks-reference.html#usedebugvalue - */ - // the name of the custom hook is itself derived from the function name at runtime: - // it's just the function name without the "use" prefix. - function useDebugValue<T>(value: T, format?: (value: T) => any): void; - - // - // Event System - // ---------------------------------------------------------------------- - // TODO: change any to unknown when moving to TS v3 - interface BaseSyntheticEvent<E = object, C = any, T = any> { - nativeEvent: E; - currentTarget: C; - target: T; - bubbles: boolean; - cancelable: boolean; - defaultPrevented: boolean; - eventPhase: number; - isTrusted: boolean; - preventDefault(): void; - isDefaultPrevented(): boolean; - stopPropagation(): void; - isPropagationStopped(): boolean; - persist(): void; - timeStamp: number; - type: string; - } - - /** - * currentTarget - a reference to the element on which the event listener is registered. - * - * target - a reference to the element from which the event was originally dispatched. - * This might be a child element to the element on which the event listener is registered. - * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682 - */ - interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {} - - interface ClipboardEvent<T = Element> extends SyntheticEvent<T, NativeClipboardEvent> { - clipboardData: DataTransfer; - } - - interface CompositionEvent<T = Element> extends SyntheticEvent<T, NativeCompositionEvent> { - data: string; - } - - interface DragEvent<T = Element> extends MouseEvent<T, NativeDragEvent> { - dataTransfer: DataTransfer; - } - - interface PointerEvent<T = Element> extends MouseEvent<T, NativePointerEvent> { - pointerId: number; - pressure: number; - tangentialPressure: number; - tiltX: number; - tiltY: number; - twist: number; - width: number; - height: number; - pointerType: 'mouse' | 'pen' | 'touch'; - isPrimary: boolean; - } - - interface FocusEvent<T = Element> extends SyntheticEvent<T, NativeFocusEvent> { - relatedTarget: EventTarget | null; - target: EventTarget & T; - } - - interface FormEvent<T = Element> extends SyntheticEvent<T> { - } - - interface InvalidEvent<T = Element> extends SyntheticEvent<T> { - target: EventTarget & T; - } - - interface ChangeEvent<T = Element> extends SyntheticEvent<T> { - target: EventTarget & T; - } - - interface KeyboardEvent<T = Element> extends SyntheticEvent<T, NativeKeyboardEvent> { - altKey: boolean; - /** @deprecated */ - charCode: number; - ctrlKey: boolean; - code: string; - /** - * 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. - */ - getModifierState(key: string): boolean; - /** - * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values - */ - key: string; - /** @deprecated */ - keyCode: number; - locale: string; - location: number; - metaKey: boolean; - repeat: boolean; - shiftKey: boolean; - /** @deprecated */ - which: number; - } - - interface MouseEvent<T = Element, E = NativeMouseEvent> extends UIEvent<T, E> { - altKey: boolean; - button: number; - buttons: number; - clientX: number; - clientY: number; - ctrlKey: boolean; - /** - * 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. - */ - getModifierState(key: string): boolean; - metaKey: boolean; - movementX: number; - movementY: number; - pageX: number; - pageY: number; - relatedTarget: EventTarget | null; - screenX: number; - screenY: number; - shiftKey: boolean; - } - - interface TouchEvent<T = Element> extends UIEvent<T, NativeTouchEvent> { - altKey: boolean; - changedTouches: TouchList; - ctrlKey: boolean; - /** - * 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. - */ - getModifierState(key: string): boolean; - metaKey: boolean; - shiftKey: boolean; - targetTouches: TouchList; - touches: TouchList; - } - - interface UIEvent<T = Element, E = NativeUIEvent> extends SyntheticEvent<T, E> { - detail: number; - view: AbstractView; - } - - interface WheelEvent<T = Element> extends MouseEvent<T, NativeWheelEvent> { - deltaMode: number; - deltaX: number; - deltaY: number; - deltaZ: number; - } - - interface AnimationEvent<T = Element> extends SyntheticEvent<T, NativeAnimationEvent> { - animationName: string; - elapsedTime: number; - pseudoElement: string; - } - - interface TransitionEvent<T = Element> extends SyntheticEvent<T, NativeTransitionEvent> { - elapsedTime: number; - propertyName: string; - pseudoElement: string; - } - - // - // Event Handler Types - // ---------------------------------------------------------------------- - - type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"]; - - type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>; - - type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>; - type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>; - type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>; - type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>; - type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>; - type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>; - type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>; - type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>; - type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>; - type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>; - type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>; - type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>; - type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>; - type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>; - - // - // Props / DOM Attributes - // ---------------------------------------------------------------------- - - /** - * @deprecated. This was used to allow clients to pass `ref` and `key` - * to `createElement`, which is no longer necessary due to intersection - * types. If you need to declare a props object before passing it to - * `createElement` or a factory, use `ClassAttributes<T>`: - * - * ```ts - * var b: Button | null; - * var props: ButtonProps & ClassAttributes<Button> = { - * ref: b => button = b, // ok! - * label: "I'm a Button" - * }; - * ``` - */ - interface Props<T> { - children?: ReactNode | undefined; - key?: Key | undefined; - ref?: LegacyRef<T> | undefined; - } - - interface HTMLProps<T> extends AllHTMLAttributes<T>, ClassAttributes<T> { - } - - type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E; - - interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T> { - } - - interface DOMAttributes<T> { - children?: ReactNode | undefined; - dangerouslySetInnerHTML?: { - __html: string; - } | undefined; - - // Clipboard Events - onCopy?: ClipboardEventHandler<T> | undefined; - onCopyCapture?: ClipboardEventHandler<T> | undefined; - onCut?: ClipboardEventHandler<T> | undefined; - onCutCapture?: ClipboardEventHandler<T> | undefined; - onPaste?: ClipboardEventHandler<T> | undefined; - onPasteCapture?: ClipboardEventHandler<T> | undefined; - - // Composition Events - onCompositionEnd?: CompositionEventHandler<T> | undefined; - onCompositionEndCapture?: CompositionEventHandler<T> | undefined; - onCompositionStart?: CompositionEventHandler<T> | undefined; - onCompositionStartCapture?: CompositionEventHandler<T> | undefined; - onCompositionUpdate?: CompositionEventHandler<T> | undefined; - onCompositionUpdateCapture?: CompositionEventHandler<T> | undefined; - - // Focus Events - onFocus?: FocusEventHandler<T> | undefined; - onFocusCapture?: FocusEventHandler<T> | undefined; - onBlur?: FocusEventHandler<T> | undefined; - onBlurCapture?: FocusEventHandler<T> | undefined; - - // Form Events - onChange?: FormEventHandler<T> | undefined; - onChangeCapture?: FormEventHandler<T> | undefined; - onBeforeInput?: FormEventHandler<T> | undefined; - onBeforeInputCapture?: FormEventHandler<T> | undefined; - onInput?: FormEventHandler<T> | undefined; - onInputCapture?: FormEventHandler<T> | undefined; - onReset?: FormEventHandler<T> | undefined; - onResetCapture?: FormEventHandler<T> | undefined; - onSubmit?: FormEventHandler<T> | undefined; - onSubmitCapture?: FormEventHandler<T> | undefined; - onInvalid?: FormEventHandler<T> | undefined; - onInvalidCapture?: FormEventHandler<T> | undefined; - - // Image Events - onLoad?: ReactEventHandler<T> | undefined; - onLoadCapture?: ReactEventHandler<T> | undefined; - onError?: ReactEventHandler<T> | undefined; // also a Media Event - onErrorCapture?: ReactEventHandler<T> | undefined; // also a Media Event - - // Keyboard Events - onKeyDown?: KeyboardEventHandler<T> | undefined; - onKeyDownCapture?: KeyboardEventHandler<T> | undefined; - onKeyPress?: KeyboardEventHandler<T> | undefined; - onKeyPressCapture?: KeyboardEventHandler<T> | undefined; - onKeyUp?: KeyboardEventHandler<T> | undefined; - onKeyUpCapture?: KeyboardEventHandler<T> | undefined; - - // Media Events - onAbort?: ReactEventHandler<T> | undefined; - onAbortCapture?: ReactEventHandler<T> | undefined; - onCanPlay?: ReactEventHandler<T> | undefined; - onCanPlayCapture?: ReactEventHandler<T> | undefined; - onCanPlayThrough?: ReactEventHandler<T> | undefined; - onCanPlayThroughCapture?: ReactEventHandler<T> | undefined; - onDurationChange?: ReactEventHandler<T> | undefined; - onDurationChangeCapture?: ReactEventHandler<T> | undefined; - onEmptied?: ReactEventHandler<T> | undefined; - onEmptiedCapture?: ReactEventHandler<T> | undefined; - onEncrypted?: ReactEventHandler<T> | undefined; - onEncryptedCapture?: ReactEventHandler<T> | undefined; - onEnded?: ReactEventHandler<T> | undefined; - onEndedCapture?: ReactEventHandler<T> | undefined; - onLoadedData?: ReactEventHandler<T> | undefined; - onLoadedDataCapture?: ReactEventHandler<T> | undefined; - onLoadedMetadata?: ReactEventHandler<T> | undefined; - onLoadedMetadataCapture?: ReactEventHandler<T> | undefined; - onLoadStart?: ReactEventHandler<T> | undefined; - onLoadStartCapture?: ReactEventHandler<T> | undefined; - onPause?: ReactEventHandler<T> | undefined; - onPauseCapture?: ReactEventHandler<T> | undefined; - onPlay?: ReactEventHandler<T> | undefined; - onPlayCapture?: ReactEventHandler<T> | undefined; - onPlaying?: ReactEventHandler<T> | undefined; - onPlayingCapture?: ReactEventHandler<T> | undefined; - onProgress?: ReactEventHandler<T> | undefined; - onProgressCapture?: ReactEventHandler<T> | undefined; - onRateChange?: ReactEventHandler<T> | undefined; - onRateChangeCapture?: ReactEventHandler<T> | undefined; - onSeeked?: ReactEventHandler<T> | undefined; - onSeekedCapture?: ReactEventHandler<T> | undefined; - onSeeking?: ReactEventHandler<T> | undefined; - onSeekingCapture?: ReactEventHandler<T> | undefined; - onStalled?: ReactEventHandler<T> | undefined; - onStalledCapture?: ReactEventHandler<T> | undefined; - onSuspend?: ReactEventHandler<T> | undefined; - onSuspendCapture?: ReactEventHandler<T> | undefined; - onTimeUpdate?: ReactEventHandler<T> | undefined; - onTimeUpdateCapture?: ReactEventHandler<T> | undefined; - onVolumeChange?: ReactEventHandler<T> | undefined; - onVolumeChangeCapture?: ReactEventHandler<T> | undefined; - onWaiting?: ReactEventHandler<T> | undefined; - onWaitingCapture?: ReactEventHandler<T> | undefined; - - // MouseEvents - onAuxClick?: MouseEventHandler<T> | undefined; - onAuxClickCapture?: MouseEventHandler<T> | undefined; - onClick?: MouseEventHandler<T> | undefined; - onClickCapture?: MouseEventHandler<T> | undefined; - onContextMenu?: MouseEventHandler<T> | undefined; - onContextMenuCapture?: MouseEventHandler<T> | undefined; - onDoubleClick?: MouseEventHandler<T> | undefined; - onDoubleClickCapture?: MouseEventHandler<T> | undefined; - onDrag?: DragEventHandler<T> | undefined; - onDragCapture?: DragEventHandler<T> | undefined; - onDragEnd?: DragEventHandler<T> | undefined; - onDragEndCapture?: DragEventHandler<T> | undefined; - onDragEnter?: DragEventHandler<T> | undefined; - onDragEnterCapture?: DragEventHandler<T> | undefined; - onDragExit?: DragEventHandler<T> | undefined; - onDragExitCapture?: DragEventHandler<T> | undefined; - onDragLeave?: DragEventHandler<T> | undefined; - onDragLeaveCapture?: DragEventHandler<T> | undefined; - onDragOver?: DragEventHandler<T> | undefined; - onDragOverCapture?: DragEventHandler<T> | undefined; - onDragStart?: DragEventHandler<T> | undefined; - onDragStartCapture?: DragEventHandler<T> | undefined; - onDrop?: DragEventHandler<T> | undefined; - onDropCapture?: DragEventHandler<T> | undefined; - onMouseDown?: MouseEventHandler<T> | undefined; - onMouseDownCapture?: MouseEventHandler<T> | undefined; - onMouseEnter?: MouseEventHandler<T> | undefined; - onMouseLeave?: MouseEventHandler<T> | undefined; - onMouseMove?: MouseEventHandler<T> | undefined; - onMouseMoveCapture?: MouseEventHandler<T> | undefined; - onMouseOut?: MouseEventHandler<T> | undefined; - onMouseOutCapture?: MouseEventHandler<T> | undefined; - onMouseOver?: MouseEventHandler<T> | undefined; - onMouseOverCapture?: MouseEventHandler<T> | undefined; - onMouseUp?: MouseEventHandler<T> | undefined; - onMouseUpCapture?: MouseEventHandler<T> | undefined; - - // Selection Events - onSelect?: ReactEventHandler<T> | undefined; - onSelectCapture?: ReactEventHandler<T> | undefined; - - // Touch Events - onTouchCancel?: TouchEventHandler<T> | undefined; - onTouchCancelCapture?: TouchEventHandler<T> | undefined; - onTouchEnd?: TouchEventHandler<T> | undefined; - onTouchEndCapture?: TouchEventHandler<T> | undefined; - onTouchMove?: TouchEventHandler<T> | undefined; - onTouchMoveCapture?: TouchEventHandler<T> | undefined; - onTouchStart?: TouchEventHandler<T> | undefined; - onTouchStartCapture?: TouchEventHandler<T> | undefined; - - // Pointer Events - onPointerDown?: PointerEventHandler<T> | undefined; - onPointerDownCapture?: PointerEventHandler<T> | undefined; - onPointerMove?: PointerEventHandler<T> | undefined; - onPointerMoveCapture?: PointerEventHandler<T> | undefined; - onPointerUp?: PointerEventHandler<T> | undefined; - onPointerUpCapture?: PointerEventHandler<T> | undefined; - onPointerCancel?: PointerEventHandler<T> | undefined; - onPointerCancelCapture?: PointerEventHandler<T> | undefined; - onPointerEnter?: PointerEventHandler<T> | undefined; - onPointerEnterCapture?: PointerEventHandler<T> | undefined; - onPointerLeave?: PointerEventHandler<T> | undefined; - onPointerLeaveCapture?: PointerEventHandler<T> | undefined; - onPointerOver?: PointerEventHandler<T> | undefined; - onPointerOverCapture?: PointerEventHandler<T> | undefined; - onPointerOut?: PointerEventHandler<T> | undefined; - onPointerOutCapture?: PointerEventHandler<T> | undefined; - onGotPointerCapture?: PointerEventHandler<T> | undefined; - onGotPointerCaptureCapture?: PointerEventHandler<T> | undefined; - onLostPointerCapture?: PointerEventHandler<T> | undefined; - onLostPointerCaptureCapture?: PointerEventHandler<T> | undefined; - - // UI Events - onScroll?: UIEventHandler<T> | undefined; - onScrollCapture?: UIEventHandler<T> | undefined; - - // Wheel Events - onWheel?: WheelEventHandler<T> | undefined; - onWheelCapture?: WheelEventHandler<T> | undefined; - - // Animation Events - onAnimationStart?: AnimationEventHandler<T> | undefined; - onAnimationStartCapture?: AnimationEventHandler<T> | undefined; - onAnimationEnd?: AnimationEventHandler<T> | undefined; - onAnimationEndCapture?: AnimationEventHandler<T> | undefined; - onAnimationIteration?: AnimationEventHandler<T> | undefined; - onAnimationIterationCapture?: AnimationEventHandler<T> | undefined; - - // Transition Events - onTransitionEnd?: TransitionEventHandler<T> | undefined; - onTransitionEndCapture?: TransitionEventHandler<T> | undefined; - } - - export interface CSSProperties extends CSS.Properties<string | number> { - /** - * The index signature was removed to enable closed typing for style - * using CSSType. You're able to use type assertion or module augmentation - * to add properties or an index signature of your own. - * - * For examples and more information, visit: - * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors - */ - } - - // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/ - interface AriaAttributes { - /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ - 'aria-activedescendant'?: string | undefined; - /** 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. */ - 'aria-atomic'?: Booleanish | undefined; - /** - * 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 - * presented if they are made. - */ - 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined; - /** 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. */ - 'aria-busy'?: Booleanish | undefined; - /** - * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. - * @see aria-pressed @see aria-selected. - */ - 'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined; - /** - * Defines the total number of columns in a table, grid, or treegrid. - * @see aria-colindex. - */ - 'aria-colcount'?: number | undefined; - /** - * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. - * @see aria-colcount @see aria-colspan. - */ - 'aria-colindex'?: number | undefined; - /** - * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. - * @see aria-colindex @see aria-rowspan. - */ - 'aria-colspan'?: number | undefined; - /** - * Identifies the element (or elements) whose contents or presence are controlled by the current element. - * @see aria-owns. - */ - 'aria-controls'?: string | undefined; - /** Indicates the element that represents the current item within a container or set of related elements. */ - 'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' | undefined; - /** - * Identifies the element (or elements) that describes the object. - * @see aria-labelledby - */ - 'aria-describedby'?: string | undefined; - /** - * Identifies the element that provides a detailed, extended description for the object. - * @see aria-describedby. - */ - 'aria-details'?: string | undefined; - /** - * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. - * @see aria-hidden @see aria-readonly. - */ - 'aria-disabled'?: Booleanish | undefined; - /** - * Indicates what functions can be performed when a dragged object is released on the drop target. - * @deprecated in ARIA 1.1 - */ - 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined; - /** - * Identifies the element that provides an error message for the object. - * @see aria-invalid @see aria-describedby. - */ - 'aria-errormessage'?: string | undefined; - /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ - 'aria-expanded'?: Booleanish | undefined; - /** - * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, - * allows assistive technology to override the general default of reading in document source order. - */ - 'aria-flowto'?: string | undefined; - /** - * Indicates an element's "grabbed" state in a drag-and-drop operation. - * @deprecated in ARIA 1.1 - */ - 'aria-grabbed'?: Booleanish | undefined; - /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ - 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined; - /** - * Indicates whether the element is exposed to an accessibility API. - * @see aria-disabled. - */ - 'aria-hidden'?: Booleanish | undefined; - /** - * Indicates the entered value does not conform to the format expected by the application. - * @see aria-errormessage. - */ - 'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined; - /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */ - 'aria-keyshortcuts'?: string | undefined; - /** - * Defines a string value that labels the current element. - * @see aria-labelledby. - */ - 'aria-label'?: string | undefined; - /** - * Identifies the element (or elements) that labels the current element. - * @see aria-describedby. - */ - 'aria-labelledby'?: string | undefined; - /** Defines the hierarchical level of an element within a structure. */ - 'aria-level'?: number | undefined; - /** 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. */ - 'aria-live'?: 'off' | 'assertive' | 'polite' | undefined; - /** Indicates whether an element is modal when displayed. */ - 'aria-modal'?: Booleanish | undefined; - /** Indicates whether a text box accepts multiple lines of input or only a single line. */ - 'aria-multiline'?: Booleanish | undefined; - /** Indicates that the user may select more than one item from the current selectable descendants. */ - 'aria-multiselectable'?: Booleanish | undefined; - /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */ - 'aria-orientation'?: 'horizontal' | 'vertical' | undefined; - /** - * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship - * between DOM elements where the DOM hierarchy cannot be used to represent the relationship. - * @see aria-controls. - */ - 'aria-owns'?: string | undefined; - /** - * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. - * A hint could be a sample value or a brief description of the expected format. - */ - 'aria-placeholder'?: string | undefined; - /** - * 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. - * @see aria-setsize. - */ - 'aria-posinset'?: number | undefined; - /** - * Indicates the current "pressed" state of toggle buttons. - * @see aria-checked @see aria-selected. - */ - 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined; - /** - * Indicates that the element is not editable, but is otherwise operable. - * @see aria-disabled. - */ - 'aria-readonly'?: Booleanish | undefined; - /** - * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. - * @see aria-atomic. - */ - 'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined; - /** Indicates that user input is required on the element before a form may be submitted. */ - 'aria-required'?: Booleanish | undefined; - /** Defines a human-readable, author-localized description for the role of an element. */ - 'aria-roledescription'?: string | undefined; - /** - * Defines the total number of rows in a table, grid, or treegrid. - * @see aria-rowindex. - */ - 'aria-rowcount'?: number | undefined; - /** - * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. - * @see aria-rowcount @see aria-rowspan. - */ - 'aria-rowindex'?: number | undefined; - /** - * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. - * @see aria-rowindex @see aria-colspan. - */ - 'aria-rowspan'?: number | undefined; - /** - * Indicates the current "selected" state of various widgets. - * @see aria-checked @see aria-pressed. - */ - 'aria-selected'?: Booleanish | undefined; - /** - * 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. - * @see aria-posinset. - */ - 'aria-setsize'?: number | undefined; - /** Indicates if items in a table or grid are sorted in ascending or descending order. */ - 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined; - /** Defines the maximum allowed value for a range widget. */ - 'aria-valuemax'?: number | undefined; - /** Defines the minimum allowed value for a range widget. */ - 'aria-valuemin'?: number | undefined; - /** - * Defines the current value for a range widget. - * @see aria-valuetext. - */ - 'aria-valuenow'?: number | undefined; - /** Defines the human readable text alternative of aria-valuenow for a range widget. */ - 'aria-valuetext'?: string | undefined; - } - - // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions - type AriaRole = - | 'alert' - | 'alertdialog' - | 'application' - | 'article' - | 'banner' - | 'button' - | 'cell' - | 'checkbox' - | 'columnheader' - | 'combobox' - | 'complementary' - | 'contentinfo' - | 'definition' - | 'dialog' - | 'directory' - | 'document' - | 'feed' - | 'figure' - | 'form' - | 'grid' - | 'gridcell' - | 'group' - | 'heading' - | 'img' - | 'link' - | 'list' - | 'listbox' - | 'listitem' - | 'log' - | 'main' - | 'marquee' - | 'math' - | 'menu' - | 'menubar' - | 'menuitem' - | 'menuitemcheckbox' - | 'menuitemradio' - | 'navigation' - | 'none' - | 'note' - | 'option' - | 'presentation' - | 'progressbar' - | 'radio' - | 'radiogroup' - | 'region' - | 'row' - | 'rowgroup' - | 'rowheader' - | 'scrollbar' - | 'search' - | 'searchbox' - | 'separator' - | 'slider' - | 'spinbutton' - | 'status' - | 'switch' - | 'tab' - | 'table' - | 'tablist' - | 'tabpanel' - | 'term' - | 'textbox' - | 'timer' - | 'toolbar' - | 'tooltip' - | 'tree' - | 'treegrid' - | 'treeitem' - | (string & {}); - - interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> { - // React-specific Attributes - defaultChecked?: boolean | undefined; - defaultValue?: string | number | ReadonlyArray<string> | undefined; - suppressContentEditableWarning?: boolean | undefined; - suppressHydrationWarning?: boolean | undefined; - - // Standard HTML Attributes - accessKey?: string | undefined; - className?: string | undefined; - contentEditable?: Booleanish | "inherit" | undefined; - contextMenu?: string | undefined; - dir?: string | undefined; - draggable?: Booleanish | undefined; - hidden?: boolean | undefined; - id?: string | undefined; - lang?: string | undefined; - placeholder?: string | undefined; - slot?: string | undefined; - spellCheck?: Booleanish | undefined; - style?: CSSProperties | undefined; - tabIndex?: number | undefined; - title?: string | undefined; - translate?: 'yes' | 'no' | undefined; - - // Unknown - radioGroup?: string | undefined; // <command>, <menuitem> - - // WAI-ARIA - role?: AriaRole | undefined; - - // RDFa Attributes - about?: string | undefined; - datatype?: string | undefined; - inlist?: any; - prefix?: string | undefined; - property?: string | undefined; - resource?: string | undefined; - typeof?: string | undefined; - vocab?: string | undefined; - - // Non-standard Attributes - autoCapitalize?: string | undefined; - autoCorrect?: string | undefined; - autoSave?: string | undefined; - color?: string | undefined; - itemProp?: string | undefined; - itemScope?: boolean | undefined; - itemType?: string | undefined; - itemID?: string | undefined; - itemRef?: string | undefined; - results?: number | undefined; - security?: string | undefined; - unselectable?: 'on' | 'off' | undefined; - - // Living Standard - /** - * Hints at the type of data that might be entered by the user while editing the element or its contents - * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute - */ - inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined; - /** - * Specify that a standard HTML element should behave like a defined custom built-in element - * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is - */ - is?: string | undefined; - } - - interface AllHTMLAttributes<T> extends HTMLAttributes<T> { - // Standard HTML Attributes - accept?: string | undefined; - acceptCharset?: string | undefined; - action?: string | undefined; - allowFullScreen?: boolean | undefined; - allowTransparency?: boolean | undefined; - alt?: string | undefined; - as?: string | undefined; - async?: boolean | undefined; - autoComplete?: string | undefined; - autoFocus?: boolean | undefined; - autoPlay?: boolean | undefined; - capture?: boolean | string | undefined; - cellPadding?: number | string | undefined; - cellSpacing?: number | string | undefined; - charSet?: string | undefined; - challenge?: string | undefined; - checked?: boolean | undefined; - cite?: string | undefined; - classID?: string | undefined; - cols?: number | undefined; - colSpan?: number | undefined; - content?: string | undefined; - controls?: boolean | undefined; - coords?: string | undefined; - crossOrigin?: string | undefined; - data?: string | undefined; - dateTime?: string | undefined; - default?: boolean | undefined; - defer?: boolean | undefined; - disabled?: boolean | undefined; - download?: any; - encType?: string | undefined; - form?: string | undefined; - formAction?: string | undefined; - formEncType?: string | undefined; - formMethod?: string | undefined; - formNoValidate?: boolean | undefined; - formTarget?: string | undefined; - frameBorder?: number | string | undefined; - headers?: string | undefined; - height?: number | string | undefined; - high?: number | undefined; - href?: string | undefined; - hrefLang?: string | undefined; - htmlFor?: string | undefined; - httpEquiv?: string | undefined; - integrity?: string | undefined; - keyParams?: string | undefined; - keyType?: string | undefined; - kind?: string | undefined; - label?: string | undefined; - list?: string | undefined; - loop?: boolean | undefined; - low?: number | undefined; - manifest?: string | undefined; - marginHeight?: number | undefined; - marginWidth?: number | undefined; - max?: number | string | undefined; - maxLength?: number | undefined; - media?: string | undefined; - mediaGroup?: string | undefined; - method?: string | undefined; - min?: number | string | undefined; - minLength?: number | undefined; - multiple?: boolean | undefined; - muted?: boolean | undefined; - name?: string | undefined; - nonce?: string | undefined; - noValidate?: boolean | undefined; - open?: boolean | undefined; - optimum?: number | undefined; - pattern?: string | undefined; - placeholder?: string | undefined; - playsInline?: boolean | undefined; - poster?: string | undefined; - preload?: string | undefined; - readOnly?: boolean | undefined; - rel?: string | undefined; - required?: boolean | undefined; - reversed?: boolean | undefined; - rows?: number | undefined; - rowSpan?: number | undefined; - sandbox?: string | undefined; - scope?: string | undefined; - scoped?: boolean | undefined; - scrolling?: string | undefined; - seamless?: boolean | undefined; - selected?: boolean | undefined; - shape?: string | undefined; - size?: number | undefined; - sizes?: string | undefined; - span?: number | undefined; - src?: string | undefined; - srcDoc?: string | undefined; - srcLang?: string | undefined; - srcSet?: string | undefined; - start?: number | undefined; - step?: number | string | undefined; - summary?: string | undefined; - target?: string | undefined; - type?: string | undefined; - useMap?: string | undefined; - value?: string | ReadonlyArray<string> | number | undefined; - width?: number | string | undefined; - wmode?: string | undefined; - wrap?: string | undefined; - } - - type HTMLAttributeReferrerPolicy = - | '' - | 'no-referrer' - | 'no-referrer-when-downgrade' - | 'origin' - | 'origin-when-cross-origin' - | 'same-origin' - | 'strict-origin' - | 'strict-origin-when-cross-origin' - | 'unsafe-url'; - - type HTMLAttributeAnchorTarget = - | '_self' - | '_blank' - | '_parent' - | '_top' - | (string & {}); - - interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> { - download?: any; - href?: string | undefined; - hrefLang?: string | undefined; - media?: string | undefined; - ping?: string | undefined; - rel?: string | undefined; - target?: HTMLAttributeAnchorTarget | undefined; - type?: string | undefined; - referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; - } - - interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {} - - interface AreaHTMLAttributes<T> extends HTMLAttributes<T> { - alt?: string | undefined; - coords?: string | undefined; - download?: any; - href?: string | undefined; - hrefLang?: string | undefined; - media?: string | undefined; - referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; - rel?: string | undefined; - shape?: string | undefined; - target?: string | undefined; - } - - interface BaseHTMLAttributes<T> extends HTMLAttributes<T> { - href?: string | undefined; - target?: string | undefined; - } - - interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> { - cite?: string | undefined; - } - - interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> { - autoFocus?: boolean | undefined; - disabled?: boolean | undefined; - form?: string | undefined; - formAction?: string | undefined; - formEncType?: string | undefined; - formMethod?: string | undefined; - formNoValidate?: boolean | undefined; - formTarget?: string | undefined; - name?: string | undefined; - type?: 'submit' | 'reset' | 'button' | undefined; - value?: string | ReadonlyArray<string> | number | undefined; - } - - interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> { - height?: number | string | undefined; - width?: number | string | undefined; - } - - interface ColHTMLAttributes<T> extends HTMLAttributes<T> { - span?: number | undefined; - width?: number | string | undefined; - } - - interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> { - span?: number | undefined; - } - - interface DataHTMLAttributes<T> extends HTMLAttributes<T> { - value?: string | ReadonlyArray<string> | number | undefined; - } - - interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> { - open?: boolean | undefined; - onToggle?: ReactEventHandler<T> | undefined; - } - - interface DelHTMLAttributes<T> extends HTMLAttributes<T> { - cite?: string | undefined; - dateTime?: string | undefined; - } - - interface DialogHTMLAttributes<T> extends HTMLAttributes<T> { - open?: boolean | undefined; - } - - interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> { - height?: number | string | undefined; - src?: string | undefined; - type?: string | undefined; - width?: number | string | undefined; - } - - interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> { - disabled?: boolean | undefined; - form?: string | undefined; - name?: string | undefined; - } - - interface FormHTMLAttributes<T> extends HTMLAttributes<T> { - acceptCharset?: string | undefined; - action?: string | undefined; - autoComplete?: string | undefined; - encType?: string | undefined; - method?: string | undefined; - name?: string | undefined; - noValidate?: boolean | undefined; - target?: string | undefined; - } - - interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> { - manifest?: string | undefined; - } - - interface IframeHTMLAttributes<T> extends HTMLAttributes<T> { - allow?: string | undefined; - allowFullScreen?: boolean | undefined; - allowTransparency?: boolean | undefined; - /** @deprecated */ - frameBorder?: number | string | undefined; - height?: number | string | undefined; - loading?: "eager" | "lazy" | undefined; - /** @deprecated */ - marginHeight?: number | undefined; - /** @deprecated */ - marginWidth?: number | undefined; - name?: string | undefined; - referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; - sandbox?: string | undefined; - /** @deprecated */ - scrolling?: string | undefined; - seamless?: boolean | undefined; - src?: string | undefined; - srcDoc?: string | undefined; - width?: number | string | undefined; - } - - interface ImgHTMLAttributes<T> extends HTMLAttributes<T> { - alt?: string | undefined; - crossOrigin?: "anonymous" | "use-credentials" | "" | undefined; - decoding?: "async" | "auto" | "sync" | undefined; - height?: number | string | undefined; - loading?: "eager" | "lazy" | undefined; - referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; - sizes?: string | undefined; - src?: string | undefined; - srcSet?: string | undefined; - useMap?: string | undefined; - width?: number | string | undefined; - } - - interface InsHTMLAttributes<T> extends HTMLAttributes<T> { - cite?: string | undefined; - dateTime?: string | undefined; - } - - type HTMLInputTypeAttribute = - | 'button' - | 'checkbox' - | 'color' - | 'date' - | 'datetime-local' - | 'email' - | 'file' - | 'hidden' - | 'image' - | 'month' - | 'number' - | 'password' - | 'radio' - | 'range' - | 'reset' - | 'search' - | 'submit' - | 'tel' - | 'text' - | 'time' - | 'url' - | 'week' - | (string & {}); - - interface InputHTMLAttributes<T> extends HTMLAttributes<T> { - accept?: string | undefined; - alt?: string | undefined; - autoComplete?: string | undefined; - autoFocus?: boolean | undefined; - capture?: boolean | string | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute - checked?: boolean | undefined; - crossOrigin?: string | undefined; - disabled?: boolean | undefined; - enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined; - form?: string | undefined; - formAction?: string | undefined; - formEncType?: string | undefined; - formMethod?: string | undefined; - formNoValidate?: boolean | undefined; - formTarget?: string | undefined; - height?: number | string | undefined; - list?: string | undefined; - max?: number | string | undefined; - maxLength?: number | undefined; - min?: number | string | undefined; - minLength?: number | undefined; - multiple?: boolean | undefined; - name?: string | undefined; - pattern?: string | undefined; - placeholder?: string | undefined; - readOnly?: boolean | undefined; - required?: boolean | undefined; - size?: number | undefined; - src?: string | undefined; - step?: number | string | undefined; - type?: HTMLInputTypeAttribute | undefined; - value?: string | ReadonlyArray<string> | number | undefined; - width?: number | string | undefined; - - onChange?: ChangeEventHandler<T> | undefined; - } - - interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> { - autoFocus?: boolean | undefined; - challenge?: string | undefined; - disabled?: boolean | undefined; - form?: string | undefined; - keyType?: string | undefined; - keyParams?: string | undefined; - name?: string | undefined; - } - - interface LabelHTMLAttributes<T> extends HTMLAttributes<T> { - form?: string | undefined; - htmlFor?: string | undefined; - } - - interface LiHTMLAttributes<T> extends HTMLAttributes<T> { - value?: string | ReadonlyArray<string> | number | undefined; - } - - interface LinkHTMLAttributes<T> extends HTMLAttributes<T> { - as?: string | undefined; - crossOrigin?: string | undefined; - href?: string | undefined; - hrefLang?: string | undefined; - integrity?: string | undefined; - media?: string | undefined; - referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; - rel?: string | undefined; - sizes?: string | undefined; - type?: string | undefined; - charSet?: string | undefined; - } - - interface MapHTMLAttributes<T> extends HTMLAttributes<T> { - name?: string | undefined; - } - - interface MenuHTMLAttributes<T> extends HTMLAttributes<T> { - type?: string | undefined; - } - - interface MediaHTMLAttributes<T> extends HTMLAttributes<T> { - autoPlay?: boolean | undefined; - controls?: boolean | undefined; - controlsList?: string | undefined; - crossOrigin?: string | undefined; - loop?: boolean | undefined; - mediaGroup?: string | undefined; - muted?: boolean | undefined; - playsInline?: boolean | undefined; - preload?: string | undefined; - src?: string | undefined; - } - - interface MetaHTMLAttributes<T> extends HTMLAttributes<T> { - charSet?: string | undefined; - content?: string | undefined; - httpEquiv?: string | undefined; - name?: string | undefined; - media?: string | undefined; - } - - interface MeterHTMLAttributes<T> extends HTMLAttributes<T> { - form?: string | undefined; - high?: number | undefined; - low?: number | undefined; - max?: number | string | undefined; - min?: number | string | undefined; - optimum?: number | undefined; - value?: string | ReadonlyArray<string> | number | undefined; - } - - interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> { - cite?: string | undefined; - } - - interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> { - classID?: string | undefined; - data?: string | undefined; - form?: string | undefined; - height?: number | string | undefined; - name?: string | undefined; - type?: string | undefined; - useMap?: string | undefined; - width?: number | string | undefined; - wmode?: string | undefined; - } - - interface OlHTMLAttributes<T> extends HTMLAttributes<T> { - reversed?: boolean | undefined; - start?: number | undefined; - type?: '1' | 'a' | 'A' | 'i' | 'I' | undefined; - } - - interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> { - disabled?: boolean | undefined; - label?: string | undefined; - } - - interface OptionHTMLAttributes<T> extends HTMLAttributes<T> { - disabled?: boolean | undefined; - label?: string | undefined; - selected?: boolean | undefined; - value?: string | ReadonlyArray<string> | number | undefined; - } - - interface OutputHTMLAttributes<T> extends HTMLAttributes<T> { - form?: string | undefined; - htmlFor?: string | undefined; - name?: string | undefined; - } - - interface ParamHTMLAttributes<T> extends HTMLAttributes<T> { - name?: string | undefined; - value?: string | ReadonlyArray<string> | number | undefined; - } - - interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> { - max?: number | string | undefined; - value?: string | ReadonlyArray<string> | number | undefined; - } - - interface SlotHTMLAttributes<T> extends HTMLAttributes<T> { - name?: string | undefined; - } - - interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> { - async?: boolean | undefined; - /** @deprecated */ - charSet?: string | undefined; - crossOrigin?: string | undefined; - defer?: boolean | undefined; - integrity?: string | undefined; - noModule?: boolean | undefined; - nonce?: string | undefined; - referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; - src?: string | undefined; - type?: string | undefined; - } - - interface SelectHTMLAttributes<T> extends HTMLAttributes<T> { - autoComplete?: string | undefined; - autoFocus?: boolean | undefined; - disabled?: boolean | undefined; - form?: string | undefined; - multiple?: boolean | undefined; - name?: string | undefined; - required?: boolean | undefined; - size?: number | undefined; - value?: string | ReadonlyArray<string> | number | undefined; - onChange?: ChangeEventHandler<T> | undefined; - } - - interface SourceHTMLAttributes<T> extends HTMLAttributes<T> { - height?: number | string | undefined; - media?: string | undefined; - sizes?: string | undefined; - src?: string | undefined; - srcSet?: string | undefined; - type?: string | undefined; - width?: number | string | undefined; - } - - interface StyleHTMLAttributes<T> extends HTMLAttributes<T> { - media?: string | undefined; - nonce?: string | undefined; - scoped?: boolean | undefined; - type?: string | undefined; - } - - interface TableHTMLAttributes<T> extends HTMLAttributes<T> { - cellPadding?: number | string | undefined; - cellSpacing?: number | string | undefined; - summary?: string | undefined; - width?: number | string | undefined; - } - - interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> { - autoComplete?: string | undefined; - autoFocus?: boolean | undefined; - cols?: number | undefined; - dirName?: string | undefined; - disabled?: boolean | undefined; - form?: string | undefined; - maxLength?: number | undefined; - minLength?: number | undefined; - name?: string | undefined; - placeholder?: string | undefined; - readOnly?: boolean | undefined; - required?: boolean | undefined; - rows?: number | undefined; - value?: string | ReadonlyArray<string> | number | undefined; - wrap?: string | undefined; - - onChange?: ChangeEventHandler<T> | undefined; - } - - interface TdHTMLAttributes<T> extends HTMLAttributes<T> { - align?: "left" | "center" | "right" | "justify" | "char" | undefined; - colSpan?: number | undefined; - headers?: string | undefined; - rowSpan?: number | undefined; - scope?: string | undefined; - abbr?: string | undefined; - height?: number | string | undefined; - width?: number | string | undefined; - valign?: "top" | "middle" | "bottom" | "baseline" | undefined; - } - - interface ThHTMLAttributes<T> extends HTMLAttributes<T> { - align?: "left" | "center" | "right" | "justify" | "char" | undefined; - colSpan?: number | undefined; - headers?: string | undefined; - rowSpan?: number | undefined; - scope?: string | undefined; - abbr?: string | undefined; - } - - interface TimeHTMLAttributes<T> extends HTMLAttributes<T> { - dateTime?: string | undefined; - } - - interface TrackHTMLAttributes<T> extends HTMLAttributes<T> { - default?: boolean | undefined; - kind?: string | undefined; - label?: string | undefined; - src?: string | undefined; - srcLang?: string | undefined; - } - - interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> { - height?: number | string | undefined; - playsInline?: boolean | undefined; - poster?: string | undefined; - width?: number | string | undefined; - disablePictureInPicture?: boolean | undefined; - disableRemotePlayback?: boolean | undefined; - } - - // this list is "complete" in that it contains every SVG attribute - // that React supports, but the types can be improved. - // Full list here: https://facebook.github.io/react/docs/dom-elements.html - // - // The three broad type categories are (in order of restrictiveness): - // - "number | string" - // - "string" - // - union of string literals - interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> { - // Attributes which also defined in HTMLAttributes - // See comment in SVGDOMPropertyConfig.js - className?: string | undefined; - color?: string | undefined; - height?: number | string | undefined; - id?: string | undefined; - lang?: string | undefined; - max?: number | string | undefined; - media?: string | undefined; - method?: string | undefined; - min?: number | string | undefined; - name?: string | undefined; - style?: CSSProperties | undefined; - target?: string | undefined; - type?: string | undefined; - width?: number | string | undefined; - - // Other HTML properties supported by SVG elements in browsers - role?: AriaRole | undefined; - tabIndex?: number | undefined; - crossOrigin?: "anonymous" | "use-credentials" | "" | undefined; - - // SVG Specific attributes - accentHeight?: number | string | undefined; - accumulate?: "none" | "sum" | undefined; - additive?: "replace" | "sum" | undefined; - alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | - "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | undefined; - allowReorder?: "no" | "yes" | undefined; - alphabetic?: number | string | undefined; - amplitude?: number | string | undefined; - arabicForm?: "initial" | "medial" | "terminal" | "isolated" | undefined; - ascent?: number | string | undefined; - attributeName?: string | undefined; - attributeType?: string | undefined; - autoReverse?: Booleanish | undefined; - azimuth?: number | string | undefined; - baseFrequency?: number | string | undefined; - baselineShift?: number | string | undefined; - baseProfile?: number | string | undefined; - bbox?: number | string | undefined; - begin?: number | string | undefined; - bias?: number | string | undefined; - by?: number | string | undefined; - calcMode?: number | string | undefined; - capHeight?: number | string | undefined; - clip?: number | string | undefined; - clipPath?: string | undefined; - clipPathUnits?: number | string | undefined; - clipRule?: number | string | undefined; - colorInterpolation?: number | string | undefined; - colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit" | undefined; - colorProfile?: number | string | undefined; - colorRendering?: number | string | undefined; - contentScriptType?: number | string | undefined; - contentStyleType?: number | string | undefined; - cursor?: number | string | undefined; - cx?: number | string | undefined; - cy?: number | string | undefined; - d?: string | undefined; - decelerate?: number | string | undefined; - descent?: number | string | undefined; - diffuseConstant?: number | string | undefined; - direction?: number | string | undefined; - display?: number | string | undefined; - divisor?: number | string | undefined; - dominantBaseline?: number | string | undefined; - dur?: number | string | undefined; - dx?: number | string | undefined; - dy?: number | string | undefined; - edgeMode?: number | string | undefined; - elevation?: number | string | undefined; - enableBackground?: number | string | undefined; - end?: number | string | undefined; - exponent?: number | string | undefined; - externalResourcesRequired?: Booleanish | undefined; - fill?: string | undefined; - fillOpacity?: number | string | undefined; - fillRule?: "nonzero" | "evenodd" | "inherit" | undefined; - filter?: string | undefined; - filterRes?: number | string | undefined; - filterUnits?: number | string | undefined; - floodColor?: number | string | undefined; - floodOpacity?: number | string | undefined; - focusable?: Booleanish | "auto" | undefined; - fontFamily?: string | undefined; - fontSize?: number | string | undefined; - fontSizeAdjust?: number | string | undefined; - fontStretch?: number | string | undefined; - fontStyle?: number | string | undefined; - fontVariant?: number | string | undefined; - fontWeight?: number | string | undefined; - format?: number | string | undefined; - from?: number | string | undefined; - fx?: number | string | undefined; - fy?: number | string | undefined; - g1?: number | string | undefined; - g2?: number | string | undefined; - glyphName?: number | string | undefined; - glyphOrientationHorizontal?: number | string | undefined; - glyphOrientationVertical?: number | string | undefined; - glyphRef?: number | string | undefined; - gradientTransform?: string | undefined; - gradientUnits?: string | undefined; - hanging?: number | string | undefined; - horizAdvX?: number | string | undefined; - horizOriginX?: number | string | undefined; - href?: string | undefined; - ideographic?: number | string | undefined; - imageRendering?: number | string | undefined; - in2?: number | string | undefined; - in?: string | undefined; - intercept?: number | string | undefined; - k1?: number | string | undefined; - k2?: number | string | undefined; - k3?: number | string | undefined; - k4?: number | string | undefined; - k?: number | string | undefined; - kernelMatrix?: number | string | undefined; - kernelUnitLength?: number | string | undefined; - kerning?: number | string | undefined; - keyPoints?: number | string | undefined; - keySplines?: number | string | undefined; - keyTimes?: number | string | undefined; - lengthAdjust?: number | string | undefined; - letterSpacing?: number | string | undefined; - lightingColor?: number | string | undefined; - limitingConeAngle?: number | string | undefined; - local?: number | string | undefined; - markerEnd?: string | undefined; - markerHeight?: number | string | undefined; - markerMid?: string | undefined; - markerStart?: string | undefined; - markerUnits?: number | string | undefined; - markerWidth?: number | string | undefined; - mask?: string | undefined; - maskContentUnits?: number | string | undefined; - maskUnits?: number | string | undefined; - mathematical?: number | string | undefined; - mode?: number | string | undefined; - numOctaves?: number | string | undefined; - offset?: number | string | undefined; - opacity?: number | string | undefined; - operator?: number | string | undefined; - order?: number | string | undefined; - orient?: number | string | undefined; - orientation?: number | string | undefined; - origin?: number | string | undefined; - overflow?: number | string | undefined; - overlinePosition?: number | string | undefined; - overlineThickness?: number | string | undefined; - paintOrder?: number | string | undefined; - panose1?: number | string | undefined; - path?: string | undefined; - pathLength?: number | string | undefined; - patternContentUnits?: string | undefined; - patternTransform?: number | string | undefined; - patternUnits?: string | undefined; - pointerEvents?: number | string | undefined; - points?: string | undefined; - pointsAtX?: number | string | undefined; - pointsAtY?: number | string | undefined; - pointsAtZ?: number | string | undefined; - preserveAlpha?: Booleanish | undefined; - preserveAspectRatio?: string | undefined; - primitiveUnits?: number | string | undefined; - r?: number | string | undefined; - radius?: number | string | undefined; - refX?: number | string | undefined; - refY?: number | string | undefined; - renderingIntent?: number | string | undefined; - repeatCount?: number | string | undefined; - repeatDur?: number | string | undefined; - requiredExtensions?: number | string | undefined; - requiredFeatures?: number | string | undefined; - restart?: number | string | undefined; - result?: string | undefined; - rotate?: number | string | undefined; - rx?: number | string | undefined; - ry?: number | string | undefined; - scale?: number | string | undefined; - seed?: number | string | undefined; - shapeRendering?: number | string | undefined; - slope?: number | string | undefined; - spacing?: number | string | undefined; - specularConstant?: number | string | undefined; - specularExponent?: number | string | undefined; - speed?: number | string | undefined; - spreadMethod?: string | undefined; - startOffset?: number | string | undefined; - stdDeviation?: number | string | undefined; - stemh?: number | string | undefined; - stemv?: number | string | undefined; - stitchTiles?: number | string | undefined; - stopColor?: string | undefined; - stopOpacity?: number | string | undefined; - strikethroughPosition?: number | string | undefined; - strikethroughThickness?: number | string | undefined; - string?: number | string | undefined; - stroke?: string | undefined; - strokeDasharray?: string | number | undefined; - strokeDashoffset?: string | number | undefined; - strokeLinecap?: "butt" | "round" | "square" | "inherit" | undefined; - strokeLinejoin?: "miter" | "round" | "bevel" | "inherit" | undefined; - strokeMiterlimit?: number | string | undefined; - strokeOpacity?: number | string | undefined; - strokeWidth?: number | string | undefined; - surfaceScale?: number | string | undefined; - systemLanguage?: number | string | undefined; - tableValues?: number | string | undefined; - targetX?: number | string | undefined; - targetY?: number | string | undefined; - textAnchor?: string | undefined; - textDecoration?: number | string | undefined; - textLength?: number | string | undefined; - textRendering?: number | string | undefined; - to?: number | string | undefined; - transform?: string | undefined; - u1?: number | string | undefined; - u2?: number | string | undefined; - underlinePosition?: number | string | undefined; - underlineThickness?: number | string | undefined; - unicode?: number | string | undefined; - unicodeBidi?: number | string | undefined; - unicodeRange?: number | string | undefined; - unitsPerEm?: number | string | undefined; - vAlphabetic?: number | string | undefined; - values?: string | undefined; - vectorEffect?: number | string | undefined; - version?: string | undefined; - vertAdvY?: number | string | undefined; - vertOriginX?: number | string | undefined; - vertOriginY?: number | string | undefined; - vHanging?: number | string | undefined; - vIdeographic?: number | string | undefined; - viewBox?: string | undefined; - viewTarget?: number | string | undefined; - visibility?: number | string | undefined; - vMathematical?: number | string | undefined; - widths?: number | string | undefined; - wordSpacing?: number | string | undefined; - writingMode?: number | string | undefined; - x1?: number | string | undefined; - x2?: number | string | undefined; - x?: number | string | undefined; - xChannelSelector?: string | undefined; - xHeight?: number | string | undefined; - xlinkActuate?: string | undefined; - xlinkArcrole?: string | undefined; - xlinkHref?: string | undefined; - xlinkRole?: string | undefined; - xlinkShow?: string | undefined; - xlinkTitle?: string | undefined; - xlinkType?: string | undefined; - xmlBase?: string | undefined; - xmlLang?: string | undefined; - xmlns?: string | undefined; - xmlnsXlink?: string | undefined; - xmlSpace?: string | undefined; - y1?: number | string | undefined; - y2?: number | string | undefined; - y?: number | string | undefined; - yChannelSelector?: string | undefined; - z?: number | string | undefined; - zoomAndPan?: string | undefined; - } - - interface WebViewHTMLAttributes<T> extends HTMLAttributes<T> { - allowFullScreen?: boolean | undefined; - allowpopups?: boolean | undefined; - autoFocus?: boolean | undefined; - autosize?: boolean | undefined; - blinkfeatures?: string | undefined; - disableblinkfeatures?: string | undefined; - disableguestresize?: boolean | undefined; - disablewebsecurity?: boolean | undefined; - guestinstance?: string | undefined; - httpreferrer?: string | undefined; - nodeintegration?: boolean | undefined; - partition?: string | undefined; - plugins?: boolean | undefined; - preload?: string | undefined; - src?: string | undefined; - useragent?: string | undefined; - webpreferences?: string | undefined; - } - - // - // React.DOM - // ---------------------------------------------------------------------- - - interface ReactHTML { - a: DetailedHTMLFactory<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>; - abbr: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - address: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - area: DetailedHTMLFactory<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>; - article: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - aside: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - audio: DetailedHTMLFactory<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>; - b: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - base: DetailedHTMLFactory<BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>; - bdi: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - bdo: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - big: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - blockquote: DetailedHTMLFactory<BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>; - body: DetailedHTMLFactory<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>; - br: DetailedHTMLFactory<HTMLAttributes<HTMLBRElement>, HTMLBRElement>; - button: DetailedHTMLFactory<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>; - canvas: DetailedHTMLFactory<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>; - caption: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - cite: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - code: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - col: DetailedHTMLFactory<ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>; - colgroup: DetailedHTMLFactory<ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>; - data: DetailedHTMLFactory<DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>; - datalist: DetailedHTMLFactory<HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>; - dd: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - del: DetailedHTMLFactory<DelHTMLAttributes<HTMLElement>, HTMLElement>; - details: DetailedHTMLFactory<DetailsHTMLAttributes<HTMLElement>, HTMLElement>; - dfn: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - dialog: DetailedHTMLFactory<DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>; - div: DetailedHTMLFactory<HTMLAttributes<HTMLDivElement>, HTMLDivElement>; - dl: DetailedHTMLFactory<HTMLAttributes<HTMLDListElement>, HTMLDListElement>; - dt: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - em: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - embed: DetailedHTMLFactory<EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>; - fieldset: DetailedHTMLFactory<FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>; - figcaption: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - figure: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - footer: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - form: DetailedHTMLFactory<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>; - h1: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - h2: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - h3: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - h4: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - h5: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - h6: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - head: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLHeadElement>; - header: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - hgroup: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - hr: DetailedHTMLFactory<HTMLAttributes<HTMLHRElement>, HTMLHRElement>; - html: DetailedHTMLFactory<HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>; - i: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - iframe: DetailedHTMLFactory<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>; - img: DetailedHTMLFactory<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>; - input: DetailedHTMLFactory<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>; - ins: DetailedHTMLFactory<InsHTMLAttributes<HTMLModElement>, HTMLModElement>; - kbd: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - keygen: DetailedHTMLFactory<KeygenHTMLAttributes<HTMLElement>, HTMLElement>; - label: DetailedHTMLFactory<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>; - legend: DetailedHTMLFactory<HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>; - li: DetailedHTMLFactory<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>; - link: DetailedHTMLFactory<LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>; - main: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - map: DetailedHTMLFactory<MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>; - mark: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - menu: DetailedHTMLFactory<MenuHTMLAttributes<HTMLElement>, HTMLElement>; - menuitem: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - meta: DetailedHTMLFactory<MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>; - meter: DetailedHTMLFactory<MeterHTMLAttributes<HTMLElement>, HTMLElement>; - nav: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - noscript: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - object: DetailedHTMLFactory<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>; - ol: DetailedHTMLFactory<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>; - optgroup: DetailedHTMLFactory<OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>; - option: DetailedHTMLFactory<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>; - output: DetailedHTMLFactory<OutputHTMLAttributes<HTMLElement>, HTMLElement>; - p: DetailedHTMLFactory<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>; - param: DetailedHTMLFactory<ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>; - picture: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - pre: DetailedHTMLFactory<HTMLAttributes<HTMLPreElement>, HTMLPreElement>; - progress: DetailedHTMLFactory<ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>; - q: DetailedHTMLFactory<QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>; - rp: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - rt: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - ruby: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - s: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - samp: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - slot: DetailedHTMLFactory<SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement>; - script: DetailedHTMLFactory<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>; - section: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - select: DetailedHTMLFactory<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>; - small: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - source: DetailedHTMLFactory<SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>; - span: DetailedHTMLFactory<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>; - strong: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - style: DetailedHTMLFactory<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>; - sub: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - summary: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - sup: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - table: DetailedHTMLFactory<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>; - template: DetailedHTMLFactory<HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement>; - tbody: DetailedHTMLFactory<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>; - td: DetailedHTMLFactory<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>; - textarea: DetailedHTMLFactory<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>; - tfoot: DetailedHTMLFactory<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>; - th: DetailedHTMLFactory<ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>; - thead: DetailedHTMLFactory<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>; - time: DetailedHTMLFactory<TimeHTMLAttributes<HTMLElement>, HTMLElement>; - title: DetailedHTMLFactory<HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>; - tr: DetailedHTMLFactory<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>; - track: DetailedHTMLFactory<TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>; - u: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - ul: DetailedHTMLFactory<HTMLAttributes<HTMLUListElement>, HTMLUListElement>; - "var": DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - video: DetailedHTMLFactory<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>; - wbr: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; - webview: DetailedHTMLFactory<WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>; - } - - interface ReactSVG { - animate: SVGFactory; - circle: SVGFactory; - clipPath: SVGFactory; - defs: SVGFactory; - desc: SVGFactory; - ellipse: SVGFactory; - feBlend: SVGFactory; - feColorMatrix: SVGFactory; - feComponentTransfer: SVGFactory; - feComposite: SVGFactory; - feConvolveMatrix: SVGFactory; - feDiffuseLighting: SVGFactory; - feDisplacementMap: SVGFactory; - feDistantLight: SVGFactory; - feDropShadow: SVGFactory; - feFlood: SVGFactory; - feFuncA: SVGFactory; - feFuncB: SVGFactory; - feFuncG: SVGFactory; - feFuncR: SVGFactory; - feGaussianBlur: SVGFactory; - feImage: SVGFactory; - feMerge: SVGFactory; - feMergeNode: SVGFactory; - feMorphology: SVGFactory; - feOffset: SVGFactory; - fePointLight: SVGFactory; - feSpecularLighting: SVGFactory; - feSpotLight: SVGFactory; - feTile: SVGFactory; - feTurbulence: SVGFactory; - filter: SVGFactory; - foreignObject: SVGFactory; - g: SVGFactory; - image: SVGFactory; - line: SVGFactory; - linearGradient: SVGFactory; - marker: SVGFactory; - mask: SVGFactory; - metadata: SVGFactory; - path: SVGFactory; - pattern: SVGFactory; - polygon: SVGFactory; - polyline: SVGFactory; - radialGradient: SVGFactory; - rect: SVGFactory; - stop: SVGFactory; - svg: SVGFactory; - switch: SVGFactory; - symbol: SVGFactory; - text: SVGFactory; - textPath: SVGFactory; - tspan: SVGFactory; - use: SVGFactory; - view: SVGFactory; - } - - interface ReactDOM extends ReactHTML, ReactSVG { } - - // - // React.PropTypes - // ---------------------------------------------------------------------- - - type Validator<T> = PropTypes.Validator<T>; - - type Requireable<T> = PropTypes.Requireable<T>; - - type ValidationMap<T> = PropTypes.ValidationMap<T>; - - type WeakValidationMap<T> = { - [K in keyof T]?: null extends T[K] - ? Validator<T[K] | null | undefined> - : undefined extends T[K] - ? Validator<T[K] | null | undefined> - : Validator<T[K]> - }; - - interface ReactPropTypes { - any: typeof PropTypes.any; - array: typeof PropTypes.array; - bool: typeof PropTypes.bool; - func: typeof PropTypes.func; - number: typeof PropTypes.number; - object: typeof PropTypes.object; - string: typeof PropTypes.string; - node: typeof PropTypes.node; - element: typeof PropTypes.element; - instanceOf: typeof PropTypes.instanceOf; - oneOf: typeof PropTypes.oneOf; - oneOfType: typeof PropTypes.oneOfType; - arrayOf: typeof PropTypes.arrayOf; - objectOf: typeof PropTypes.objectOf; - shape: typeof PropTypes.shape; - exact: typeof PropTypes.exact; - } - - // - // React.Children - // ---------------------------------------------------------------------- - - interface ReactChildren { - map<T, C>(children: C | ReadonlyArray<C>, fn: (child: C, index: number) => T): - C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>; - forEach<C>(children: C | ReadonlyArray<C>, fn: (child: C, index: number) => void): void; - count(children: any): number; - only<C>(children: C): C extends any[] ? never : C; - toArray(children: ReactNode | ReactNode[]): Array<Exclude<ReactNode, boolean | null | undefined>>; - } - - // - // Browser Interfaces - // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts - // ---------------------------------------------------------------------- - - interface AbstractView { - styleMedia: StyleMedia; - document: Document; - } - - interface Touch { - identifier: number; - target: EventTarget; - screenX: number; - screenY: number; - clientX: number; - clientY: number; - pageX: number; - pageY: number; - } - - interface TouchList { - [index: number]: Touch; - length: number; - item(index: number): Touch; - identifiedTouch(identifier: number): Touch; - } - - // - // Error Interfaces - // ---------------------------------------------------------------------- - interface ErrorInfo { - /** - * Captures which component contained the exception, and its ancestors. - */ - componentStack: string; - } -} - -// naked 'any' type in a conditional type will short circuit and union both the then/else branches -// so boolean is only resolved for T = any -type IsExactlyAny<T> = boolean extends (T extends never ? true : false) ? true : false; - -type ExactlyAnyPropertyKeys<T> = { [K in keyof T]: IsExactlyAny<T[K]> extends true ? K : never }[keyof T]; -type NotExactlyAnyPropertyKeys<T> = Exclude<keyof T, ExactlyAnyPropertyKeys<T>>; - -// Try to resolve ill-defined props like for JS users: props can be any, or sometimes objects with properties of type any -type MergePropTypes<P, T> = - // Distribute over P in case it is a union type - P extends any - // If props is type any, use propTypes definitions - ? IsExactlyAny<P> extends true ? T : - // If declared props have indexed properties, ignore inferred props entirely as keyof gets widened - string extends keyof P ? P : - // Prefer declared types which are not exactly any - & Pick<P, NotExactlyAnyPropertyKeys<P>> - // For props which are exactly any, use the type inferred from propTypes if present - & Pick<T, Exclude<keyof T, NotExactlyAnyPropertyKeys<P>>> - // Keep leftover props not specified in propTypes - & Pick<P, Exclude<keyof P, keyof T>> - : never; - -// Any prop that has a default prop becomes optional, but its type is unchanged -// Undeclared default props are augmented into the resulting allowable attributes -// If declared props have indexed properties, ignore default props entirely as keyof gets widened -// Wrap in an outer-level conditional type to allow distribution over props that are unions -type Defaultize<P, D> = P extends any - ? string extends keyof P ? P : - & Pick<P, Exclude<keyof P, keyof D>> - & Partial<Pick<P, Extract<keyof P, keyof D>>> - & Partial<Pick<D, Exclude<keyof D, keyof P>>> - : never; - -type ReactManagedAttributes<C, P> = C extends { propTypes: infer T; defaultProps: infer D; } - ? Defaultize<MergePropTypes<P, PropTypes.InferProps<T>>, D> - : C extends { propTypes: infer T; } - ? MergePropTypes<P, PropTypes.InferProps<T>> - : C extends { defaultProps: infer D; } - ? Defaultize<P, D> - : P; - -declare global { - namespace JSX { - interface Element extends React.ReactElement<any, any> { } - interface ElementClass extends React.Component<any> { - render(): React.ReactNode; - } - interface ElementAttributesProperty { props: {}; } - interface ElementChildrenAttribute { children: {}; } - - // We can't recurse forever because `type` can't be self-referential; - // let's assume it's reasonable to do a single React.lazy() around a single React.memo() / vice-versa - type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T> - ? T extends React.MemoExoticComponent<infer U> | React.LazyExoticComponent<infer U> - ? ReactManagedAttributes<U, P> - : ReactManagedAttributes<T, P> - : ReactManagedAttributes<C, P>; - - interface IntrinsicAttributes extends React.Attributes { } - interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> { } - - interface IntrinsicElements { - // HTML - a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>; - abbr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - address: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - area: React.DetailedHTMLProps<React.AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>; - article: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - aside: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - audio: React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>; - b: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - base: React.DetailedHTMLProps<React.BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>; - bdi: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - bdo: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - big: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - blockquote: React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>; - body: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>; - br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>; - button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>; - canvas: React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>; - caption: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - cite: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - code: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - col: React.DetailedHTMLProps<React.ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>; - colgroup: React.DetailedHTMLProps<React.ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>; - data: React.DetailedHTMLProps<React.DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>; - datalist: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>; - dd: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - del: React.DetailedHTMLProps<React.DelHTMLAttributes<HTMLElement>, HTMLElement>; - details: React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLElement>, HTMLElement>; - dfn: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - dialog: React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>; - div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>; - dl: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>; - dt: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - em: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - embed: React.DetailedHTMLProps<React.EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>; - fieldset: React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>; - figcaption: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - figure: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - footer: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>; - h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - h2: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - h3: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - h4: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - h5: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - h6: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>; - head: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>; - header: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - hgroup: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - hr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>; - html: React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>; - i: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - iframe: React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>; - img: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>; - input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>; - ins: React.DetailedHTMLProps<React.InsHTMLAttributes<HTMLModElement>, HTMLModElement>; - kbd: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - keygen: React.DetailedHTMLProps<React.KeygenHTMLAttributes<HTMLElement>, HTMLElement>; - label: React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>; - legend: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>; - li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>; - link: React.DetailedHTMLProps<React.LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>; - main: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - map: React.DetailedHTMLProps<React.MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>; - mark: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - menu: React.DetailedHTMLProps<React.MenuHTMLAttributes<HTMLElement>, HTMLElement>; - menuitem: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - meta: React.DetailedHTMLProps<React.MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>; - meter: React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLElement>, HTMLElement>; - nav: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - noindex: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - noscript: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - object: React.DetailedHTMLProps<React.ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>; - ol: React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>; - optgroup: React.DetailedHTMLProps<React.OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>; - option: React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>; - output: React.DetailedHTMLProps<React.OutputHTMLAttributes<HTMLElement>, HTMLElement>; - p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>; - param: React.DetailedHTMLProps<React.ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>; - picture: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - pre: React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement>; - progress: React.DetailedHTMLProps<React.ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>; - q: React.DetailedHTMLProps<React.QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>; - rp: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - rt: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - ruby: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - s: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - samp: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - slot: React.DetailedHTMLProps<React.SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement>; - script: React.DetailedHTMLProps<React.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>; - section: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - select: React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>; - small: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - source: React.DetailedHTMLProps<React.SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>; - span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>; - strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - style: React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>; - sub: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - summary: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - sup: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - table: React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>; - template: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement>; - tbody: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>; - td: React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>; - textarea: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>; - tfoot: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>; - th: React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>; - thead: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>; - time: React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLElement>, HTMLElement>; - title: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>; - tr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>; - track: React.DetailedHTMLProps<React.TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>; - u: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>; - "var": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - video: React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>; - wbr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; - webview: React.DetailedHTMLProps<React.WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>; - - // SVG - svg: React.SVGProps<SVGSVGElement>; - - animate: React.SVGProps<SVGElement>; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now. - animateMotion: React.SVGProps<SVGElement>; - animateTransform: React.SVGProps<SVGElement>; // TODO: It is SVGAnimateTransformElement but is not in TypeScript's lib.dom.d.ts for now. - circle: React.SVGProps<SVGCircleElement>; - clipPath: React.SVGProps<SVGClipPathElement>; - defs: React.SVGProps<SVGDefsElement>; - desc: React.SVGProps<SVGDescElement>; - ellipse: React.SVGProps<SVGEllipseElement>; - feBlend: React.SVGProps<SVGFEBlendElement>; - feColorMatrix: React.SVGProps<SVGFEColorMatrixElement>; - feComponentTransfer: React.SVGProps<SVGFEComponentTransferElement>; - feComposite: React.SVGProps<SVGFECompositeElement>; - feConvolveMatrix: React.SVGProps<SVGFEConvolveMatrixElement>; - feDiffuseLighting: React.SVGProps<SVGFEDiffuseLightingElement>; - feDisplacementMap: React.SVGProps<SVGFEDisplacementMapElement>; - feDistantLight: React.SVGProps<SVGFEDistantLightElement>; - feDropShadow: React.SVGProps<SVGFEDropShadowElement>; - feFlood: React.SVGProps<SVGFEFloodElement>; - feFuncA: React.SVGProps<SVGFEFuncAElement>; - feFuncB: React.SVGProps<SVGFEFuncBElement>; - feFuncG: React.SVGProps<SVGFEFuncGElement>; - feFuncR: React.SVGProps<SVGFEFuncRElement>; - feGaussianBlur: React.SVGProps<SVGFEGaussianBlurElement>; - feImage: React.SVGProps<SVGFEImageElement>; - feMerge: React.SVGProps<SVGFEMergeElement>; - feMergeNode: React.SVGProps<SVGFEMergeNodeElement>; - feMorphology: React.SVGProps<SVGFEMorphologyElement>; - feOffset: React.SVGProps<SVGFEOffsetElement>; - fePointLight: React.SVGProps<SVGFEPointLightElement>; - feSpecularLighting: React.SVGProps<SVGFESpecularLightingElement>; - feSpotLight: React.SVGProps<SVGFESpotLightElement>; - feTile: React.SVGProps<SVGFETileElement>; - feTurbulence: React.SVGProps<SVGFETurbulenceElement>; - filter: React.SVGProps<SVGFilterElement>; - foreignObject: React.SVGProps<SVGForeignObjectElement>; - g: React.SVGProps<SVGGElement>; - image: React.SVGProps<SVGImageElement>; - line: React.SVGProps<SVGLineElement>; - linearGradient: React.SVGProps<SVGLinearGradientElement>; - marker: React.SVGProps<SVGMarkerElement>; - mask: React.SVGProps<SVGMaskElement>; - metadata: React.SVGProps<SVGMetadataElement>; - mpath: React.SVGProps<SVGElement>; - path: React.SVGProps<SVGPathElement>; - pattern: React.SVGProps<SVGPatternElement>; - polygon: React.SVGProps<SVGPolygonElement>; - polyline: React.SVGProps<SVGPolylineElement>; - radialGradient: React.SVGProps<SVGRadialGradientElement>; - rect: React.SVGProps<SVGRectElement>; - stop: React.SVGProps<SVGStopElement>; - switch: React.SVGProps<SVGSwitchElement>; - symbol: React.SVGProps<SVGSymbolElement>; - text: React.SVGProps<SVGTextElement>; - textPath: React.SVGProps<SVGTextPathElement>; - tspan: React.SVGProps<SVGTSpanElement>; - use: React.SVGProps<SVGUseElement>; - view: React.SVGProps<SVGViewElement>; - } - } -} From d2e316764ec103fa03690365ba071fc416dc7a7d Mon Sep 17 00:00:00 2001 From: softmarshmallow <woojoo@softmarshmallow.com> Date: Wed, 3 Nov 2021 00:40:53 +0900 Subject: [PATCH 9/9] bump flutter-builder version --- editor/next.config.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/editor/next.config.js b/editor/next.config.js index a44c5bda5..db8fc000b 100644 --- a/editor/next.config.js +++ b/editor/next.config.js @@ -67,9 +67,6 @@ const withTM = require("next-transpile-modules")([ // ----------------------------- // region builders - part of designto-code / coli - // region flutter builder - "@flutter-builder/flutter", - // endregion flutter builder // region web builders "@coli.codes/nodejs-builder", @@ -85,13 +82,6 @@ const withTM = require("next-transpile-modules")([ module.exports = withTM({ webpack: (config) => { - config.node = { - fs: "empty", - }; - config.module.rules.push({ - test: /\.txt$/, - use: "raw-loader", - }); return config; }, async redirects() {