From 23328345c9630a94138f589b6e747e4cc1015540 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Tue, 24 May 2022 08:15:17 -0700 Subject: [PATCH 01/70] wip --- beta/package.json | 5 +- .../components/MDX/Sandpack/CustomPreset.tsx | 14 +- .../sandpack-tsserver/ChannelBridge.ts | 239 +++++++ .../sandpack-tsserver/SandpackTypescript.tsx | 62 ++ .../codemirrorExtensions.tsx | 637 ++++++++++++++++++ .../MDX/Sandpack/sandpack-tsserver/debug.ts | 40 ++ .../sandpack-tsserver/localStorageHelper.ts | 11 + .../sandpack-tsserver/tsserver.worker.ts | 449 ++++++++++++ .../useTypescriptExtension.tsx | 142 ++++ .../MDX/Sandpack/useSandpackLint.tsx | 3 + beta/yarn.lock | 34 +- 11 files changed, 1630 insertions(+), 6 deletions(-) create mode 100644 beta/src/components/MDX/Sandpack/sandpack-tsserver/ChannelBridge.ts create mode 100644 beta/src/components/MDX/Sandpack/sandpack-tsserver/SandpackTypescript.tsx create mode 100644 beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx create mode 100644 beta/src/components/MDX/Sandpack/sandpack-tsserver/debug.ts create mode 100644 beta/src/components/MDX/Sandpack/sandpack-tsserver/localStorageHelper.ts create mode 100644 beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts create mode 100644 beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx diff --git a/beta/package.json b/beta/package.json index 68e2f9b2326..f96da74a18f 100644 --- a/beta/package.json +++ b/beta/package.json @@ -31,6 +31,7 @@ "classnames": "^2.2.6", "date-fns": "^2.16.1", "debounce": "^1.2.1", + "debug": "^4.3.4", "ga-lite": "^2.1.4", "github-slugger": "^1.3.0", "next": "12.1.7-canary.11", @@ -44,6 +45,7 @@ "@mdx-js/loader": "^1.6.16", "@types/body-scroll-lock": "^2.6.1", "@types/classnames": "^2.2.10", + "@types/debug": "^4.1.7", "@types/github-slugger": "^1.3.0", "@types/mdx-js__react": "^1.5.2", "@types/node": "^14.6.4", @@ -52,6 +54,7 @@ "@types/react-dom": "^18.0.5", "@typescript-eslint/eslint-plugin": "2.x", "@typescript-eslint/parser": "2.x", + "@typescript/vfs": "^1.3.5", "asyncro": "^3.0.0", "autoprefixer": "^10.4.2", "babel-eslint": "10.x", @@ -87,7 +90,7 @@ "retext-smartypants": "^4.0.0", "rss": "^1.2.2", "tailwindcss": "^3.0.22", - "typescript": "^4.0.2", + "typescript": "^4.6.4", "unist-util-visit": "^2.0.3", "webpack-bundle-analyzer": "^4.5.0" }, diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index bb0f1c67169..6e67ff770fd 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -19,6 +19,7 @@ import {NavigationBar} from './NavigationBar'; import {Preview} from './Preview'; import {CustomTheme} from './Themes'; import {useSandpackLint} from './useSandpackLint'; +import {useTypescriptExtension} from './sandpack-tsserver/useTypescriptExtension'; // Workaround for https://github.com/reactjs/reactjs.org/issues/4686#issuecomment-1137402613. const emptyArray: Array = []; @@ -34,7 +35,17 @@ export function CustomPreset({ devToolsLoaded: boolean; onDevToolsLoad: () => void; }) { + // Codemirror extensions const {lintErrors, lintExtensions} = useSandpackLint(); + const typescriptExtensions = useTypescriptExtension(); + let forceSandpackRemountKeyRef = React.useRef(0); + const extensions = React.useMemo(() => { + // Whenever an extension changes, we need to remount + forceSandpackRemountKeyRef.current++; + const result = [lintExtensions, typescriptExtensions].flat(); + return result; + }, [lintExtensions, typescriptExtensions]); + const lineCountRef = React.useRef<{[key: string]: number}>({}); const containerRef = React.useRef(null); const {sandpack} = useSandpack(); @@ -63,11 +74,12 @@ export function CustomPreset({ isExpanded && 'sp-layout-expanded' )}> = { + [K in keyof T]: T[K] extends (...args: infer Args) => infer Result + ? { + type: 'call'; + seq: string; + prop: K; + args: Args; + [ResponseTypeSymbol]: Result; + } + : { + type: 'get'; + seq: string; + prop: K; + args?: []; + [ResponseTypeSymbol]: T[K]; + }; +}; + +interface ReadyMessage { + type: 'ready'; +} + +interface SuccessResponse { + type: 'ok'; + seq: string; + ok: true; + value: T; +} + +interface ErrorResponse { + type: 'error'; + seq: string; + ok: false; + error: E; +} + +/** + * Something you can listen to. + */ +interface ListenablePort { + addEventListener( + event: 'message', + handler: (event: MessageEvent) => void + ): void; + removeEventListener( + event: 'message', + handler: (event: MessageEvent) => void + ): void; +} + +/** + * Something you could write to. + */ +interface WritablePort { + postMessage(message: unknown): void; +} + +type MessageType = ServerMessageMap[keyof ServerMessageMap]; +type CallOf = Extract, {type: 'call'}>['prop']; +type GetOf = Extract, {type: 'get'}>['prop']; + +/** + * RPC over channel-like interface. + * `Interface` describes the methods this client can call on the server. + * + * Makes request from a `ChannelServer` over a `postMessage`, and listens + * via `addEventListener` for `message` events. + */ +export class ChannelClient { + static create(args: { + listenPort: ListenablePort; + requestPort: WritablePort; + waitForReady: boolean; + }): [ChannelClient, () => void] { + const client = new ChannelClient( + args.requestPort, + args.waitForReady + ); + args.listenPort.addEventListener('message', client.onMessage); + return [ + client, + () => args.listenPort.removeEventListener('message', client.onMessage), + ]; + } + + constructor(private requestPort: WritablePort, waitForReady = true) { + this.ready = !waitForReady; + } + + private pending = new Map< + string, + {resolve: (value: any) => void; reject: (reason: any) => void} + >(); + private seq = 0; + private ready = false; + private buffer: Array> = []; + + public async get>( + key: K + ): Promise[K][typeof ResponseTypeSymbol]> { + return this.request({ + type: 'get', + seq: String(this.seq++), + prop: key, + } as any); + } + + /** + * Call method named `key` on the server. + */ + public async call>( + key: K, + ...args: NonNullable[K]['args']> + ): Promise[K][typeof ResponseTypeSymbol]> { + return this.request({ + type: 'call', + seq: String(this.seq++), + prop: key, + args, + } as any); + } + + private request( + request: ServerMessageMap[K] + ): Promise[K][typeof ResponseTypeSymbol]> { + return new Promise((resolve, reject) => { + this.pending.set(request.seq, {resolve, reject}); + if (this.ready) { + this.requestPort.postMessage(request); + } else { + this.buffer.push(request); + } + }); + } + + onMessage = ( + event: MessageEvent | ErrorResponse | ReadyMessage> + ) => { + const data = event.data; + if (data.type === 'ok') { + this.pending.get(data.seq)?.resolve(data.value); + this.pending.delete(data.seq); + } else if (data.type === 'error') { + this.pending.get(data.seq)?.reject(data.error); + this.pending.delete(data.seq); + } else if (data.type === 'ready') { + this.ready = true; + this.buffer.forEach((request) => this.requestPort.postMessage(request)); + this.buffer = []; + } + }; +} + +/** + * RPC server over channel-like interface. + * + * Listens for requests using `addEventListener` for `message` events. + * Responds by posting messages back to the client. + */ +export class ChannelServer { + private impl: Interface; + private responsePort: WritablePort; + + static create(args: { + expose: Interface; + listenPort: ListenablePort; + responsePort: WritablePort; + }) { + const client = new ChannelServer(args); + args.listenPort.addEventListener('message', client.onMessage); + client.sendReady(); + return [ + client, + () => args.listenPort.removeEventListener('message', client.onMessage), + ]; + } + + constructor(args: {expose: Interface; responsePort: WritablePort}) { + this.impl = args.expose; + this.responsePort = args.responsePort; + } + + private respond( + request: ServerMessageMap[K], + response: + | { + ok: true; + value: ServerMessageMap[K][typeof ResponseTypeSymbol]; + } + | {ok: false; error: unknown} + ) { + if (response.ok) { + const fullResponse: SuccessResponse< + ServerMessageMap[K][typeof ResponseTypeSymbol] + > = { + ...response, + seq: request.seq, + type: 'ok', + }; + this.responsePort.postMessage(fullResponse); + } else { + const fullResponse: ErrorResponse = { + ...response, + seq: request.seq, + type: 'error', + }; + this.responsePort.postMessage(fullResponse); + } + } + + sendReady() { + const ready: ReadyMessage = { + type: 'ready', + }; + this.responsePort.postMessage(ready); + } + + onMessage = async (event: MessageEvent>) => { + const data = event.data; + try { + if (data.type === 'call') { + const result = await Promise.resolve( + (this.impl as any)[data.prop](...data.args) + ); + this.respond(data, {ok: true, value: result}); + } else if (data.type === 'get') { + this.respond(data, { + ok: true, + value: await Promise.resolve(this.impl[data.prop]), + }); + } + } catch (error) { + this.respond(data, {ok: false, error}); + } + }; +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/SandpackTypescript.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/SandpackTypescript.tsx new file mode 100644 index 00000000000..842b2d13348 --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/SandpackTypescript.tsx @@ -0,0 +1,62 @@ +import { + SandpackConsumer, + SandpackLayout, + SandpackPreview, + SandpackProvider, + SandpackSetup, + SandpackThemeProvider, + SandpackPredefinedTemplate, + SandpackThemeProp, + SandpackFiles, +} from '@codesandbox/sandpack-react'; +import '@codesandbox/sandpack-react/dist/index.css'; +import React from 'react'; +import {CodeEditor} from './CodeEditor'; + +declare module '@codesandbox/sandpack-react' { + interface SandpackProviderProps { + children?: React.ReactNode; + } + + // @ts-expect-error Force allow overriding variables + const SandpackThemeProvider: React.FC<{ + theme?: SandpackThemeProp; + children?: React.ReactNode; + }>; +} + +export const SandpackTypescript: React.FC<{ + theme?: SandpackThemeProp; + files?: SandpackFiles; + customSetup?: SandpackSetup; + template: SandpackPredefinedTemplate; +}> = ({customSetup, template, theme}) => { + return ( +
+ + + + + + + + +
+ ); +}; + +export function SandpackTypescriptEditor() { + return ( + + {(state) => } + + ); +} + +type wat = JSX.Element; diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx new file mode 100644 index 00000000000..13d5604ba0c --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -0,0 +1,637 @@ +import { + autocompletion, + completeFromList, + Completion, + CompletionContext, + CompletionResult, + pickedCompletion, +} from '@codemirror/autocomplete'; +import * as hl from '@codemirror/highlight'; +import { + closeLintPanel, + Diagnostic, + forceLinting, + linter, + openLintPanel, +} from '@codemirror/lint'; +import {EditorState} from '@codemirror/state'; +import {hoverTooltip, Tooltip, tooltips} from '@codemirror/tooltip'; +import {Command, EditorView, keymap, ViewUpdate} from '@codemirror/view'; +import {SandpackFiles} from '@codesandbox/sandpack-react'; +import {ReactElement, ReactNode} from 'react'; +import {renderToStaticMarkup} from 'react-dom/server'; +import type ts from 'typescript'; +import {SymbolDisplayPart, SymbolDisplayPartKind} from 'typescript'; +import {DEBUG_EDITOR_RENDER} from './debug'; +import {ChannelClient} from './ChannelBridge'; +import type {TSServerWorker} from './tsserver.worker'; + +export function normalizePath(path: string): string; +export function normalizePath(path: undefined): undefined; +export function normalizePath(path: string | undefined) { + if (path === undefined) { + return path; + } + if (path[0] === '/') { + return path; + } + return `/${path}`; +} + +export function normalizePaths(fs: SandpackFiles): SandpackFiles { + return Object.fromEntries( + Object.entries(fs).map(([key, value]) => [normalizePath(key), value]) + ); +} + +export const codemirrorTypescriptExtensions = ( + client: ChannelClient, + filePath: string | undefined, + tooltipRef?: HTMLElement | null | undefined +) => { + DEBUG_EDITOR_RENDER( + 'codemirrorTypescriptExtensions(filePath: "%s")', + filePath + ); + const formatCode: Command = (target) => { + if (!filePath) { + return false; + } + void (async () => { + const contents = target.state.doc.toJSON().join('\n'); + await client.call('updateFile', normalizePath(filePath), contents); + const changes = await client.call('formatFile', normalizePath(filePath)); + if (!changes) { + return; + } + target.dispatch({ + changes: getCodemirrorChanges(target.state, changes), + }); + })(); + return true; + }; + + let previousFileContent: string | undefined; + + return [ + tooltips({ + // Fixed mode doesn't work well if your document scrolls! + position: 'absolute', + // TODO: this doesn't seem to work! + parent: DEBUG_EDITOR_RENDER.tap('tooltipRef', tooltipRef) ?? undefined, + }), + + EditorView.updateListener.of((update: ViewUpdate) => { + if (filePath) { + const newFileContent = update.state.doc.toJSON().join('\n'); + if (newFileContent !== previousFileContent) { + previousFileContent = newFileContent; + client.call( + 'updateFile', + normalizePath(filePath), + update.state.doc.toJSON().join('\n') + ); + } + } + }), + + autocompletion({ + activateOnTyping: true, + override: [ + throttleAsync( + 150, + async (ctx: CompletionContext): Promise => { + const {pos} = ctx; + + try { + const completions = + filePath && + (await client.call( + 'autocompleteAtPosition', + pos, + normalizePath(filePath) + )); + + if (!completions) { + console.log('Unable to get completions', {pos}); + return null; + } + + return completeFromList( + completions.entries.map((c, i) => { + if (c.name === 'useRef') { + console.log(`completion ${i}:`, c); + } + + const details = c.details; + const description = details?.codeActions?.at(0)?.description; + const source = + details?.sourceDisplay + ?.map((token) => token.text) + .join('') || c.sourceDisplayString; + const actions = details?.codeActions; + + const suggestions: Completion = { + type: c.kind, + label: c.name, + detail: source, + apply: actions + ? (view) => { + const codeActionChanges = actions.flatMap((action) => + getCodemirrorFileChanges( + view.state, + action.changes, + filePath + ) + ); + + const apply = c.name; + + // TODO: this is messed yp + // debugger; + const matchedPrefix = + ctx.matchBefore(/\w+/) ?? + DEBUG_EDITOR_RENDER.tap('fallback', { + from: Math.min( + ctx.pos, + view.state.selection.main.from + ), + to: view.state.selection.main.to, + }); + const baseLabelChange = { + from: matchedPrefix.from, + to: view.state.selection.main.to, + insert: apply, + }; + + // Copied from here: + // https://github.com/codemirror/autocomplete/blob/97bf06555c5028ca9930576fb05e5f809a2d604f/src/completion.ts#L213-L229 + // But, we don't have the things we need to use it. + // const insertLabelChanges = view.state.changeByRange( + // (range) => { + // if (range == view.state.selection.main) + // return { + // changes: { + // from: baseLabelChange.from, + // to: baseLabelChange.to, + // insert: apply, + // }, + // range: EditorSelection.cursor( + // baseLabelChange.from + apply.length + // ), + // }; + // const len = + // baseLabelChange.to - baseLabelChange.from; + // if ( + // !range.empty || + // (len && + // view.state.sliceDoc( + // range.from - len, + // range.from + // ) != + // view.state.sliceDoc( + // baseLabelChange.from, + // baseLabelChange.to + // )) + // ) + // return { range }; + // return { + // changes: { + // from: range.from - len, + // to: range.from, + // insert: apply, + // }, + // range: EditorSelection.cursor( + // range.from - len + apply.length + // ), + // }; + // } + // ); + + console.log( + 'change', + baseLabelChange, + ctx.state.sliceDoc( + baseLabelChange.from, + baseLabelChange.to + ) + ); + + view.dispatch({ + // ...insertLabelChanges, + changes: [ + // insertLabelChanges.changes, + baseLabelChange, + ...codeActionChanges, + ], + annotations: pickedCompletion.of(suggestions), + }); + } + : undefined, + info: + details && + function () { + const container = document.createElement('div'); + renderIntoNode( + container, + + <> + {description && ( +
+ {description} +
+ )} + + + ); + return container; + }, + // detail: c. + // TODO:: populate details and info + boost: 1 / Number(c.sortText), + }; + + return suggestions; + }) + )(ctx); + } catch (e) { + console.log('Unable to get completions', {pos, error: e}); + return null; + } + } + ), + ], + }), + + hoverTooltip( + async (_: EditorView, pos: number): Promise => { + const allInfo = filePath + ? await client.call('infoAtPosition', pos, normalizePath(filePath)) + : undefined; + + if (!allInfo) { + return null; + } + + const {result: quickInfo, tootltipText} = allInfo; + + if (!quickInfo) return null; + + return { + pos, + create(view) { + const dom = document.createElement('div'); + dom.setAttribute('class', 'cm-diagnostic cm-diagnostic-info'); + renderIntoNode( + dom, + + ); + return {dom}; + }, + }; + }, + {hideOnChange: true} + ), + + keymap.of([ + { + key: 'Cmd-.', + run: (editor) => openLintPanel(editor) || closeLintPanel(editor), + }, + { + key: 'Shift-Alt-f', + run: formatCode, + }, + { + key: 'Mod-s', + run: formatCode, + }, + ]), + + linter( + async (): Promise => { + if (!filePath) { + return []; + } + + const diagnostics = await client.call( + 'lintSystem', + normalizePath(filePath) + ); + + if (!diagnostics) { + return []; + } + + return diagnostics.map((diagnostic) => { + const {serializedActions, ...valid} = diagnostic; + return { + ...valid, + actions: serializedActions.map((action) => { + let applied = false; + return { + name: action.name, + apply: (editor) => { + if (applied) { + return; + } + applied = true; + + const changes = getCodemirrorFileChanges( + editor.state, + action.data.changes, + filePath + ); + + editor.dispatch({ + changes, + }); + + if (action.data.commands) { + client.call('applyCodeAction', action.data.commands); + } + + forceLinting(editor); + }, + }; + }), + }; + }); + }, + {delay: 400} + ), + + EditorView.baseTheme({ + // ".cm-diagnostic-info": { + // borderLeft: "5px solid var(--sp-colors-fg-default)", + // }, + '.quickinfo-monospace': { + fontFamily: `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, + fontSize: '87%', + }, + '.quickinfo-truncate': { + display: '-webkit-box', + WebkitLineClamp: '1', + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + }, + '.quickinfo-small': { + fontSize: '90%', + }, + '.cm-diagnostic .quickinfo-documentation:first-child': { + paddingTop: 0, + }, + '.quickinfo-documentation:first-child': { + marginTop: 0, + paddingTop: '3px', + }, + '.quickinfo-documentation': { + marginLeft: '-8px', + paddingLeft: '8px', + marginRight: '-6px', + paddingRight: '6px', + paddingTop: '6px', + marginTop: '6px', + }, + '.quickinfo-tsdoc-tag': { + margin: '3px 0', + }, + '.cm-diagnosticAction': { + backgroundColor: 'transparent', + padding: 0, + margin: '4px 0', + textDecoration: 'underline', + cursor: 'pointer', + color: 'inherit', + display: 'block', + textAlign: 'left', + }, + }), + ]; +}; + +function getCodemirrorFileChanges( + state: EditorState, + changes: ts.FileTextChanges[], + filePath: string +) { + return changes.flatMap((fileEdit) => { + if (fileEdit.fileName !== normalizePath(filePath)) { + console.warn('Unable to apply changes to other files', fileEdit); + return []; + } + + return getCodemirrorChanges(state, fileEdit.textChanges); + }); +} + +function getCodemirrorChanges( + state: EditorState, + changes: readonly ts.TextChange[] +) { + return changes.map((change) => { + return state.changes({ + from: change.span.start, + to: change.span.start + change.span.length, + insert: change.newText, + }); + }); +} + +const TS_SYMBOL_TAG_TO_CODEMIRROR_TAG: Record< + keyof typeof SymbolDisplayPartKind, + hl.Tag | undefined +> = { + moduleName: hl.tags.namespace, + localName: hl.tags.local(hl.tags.name), + functionName: hl.tags.function(hl.tags.name), + interfaceName: hl.tags.typeName, + aliasName: hl.tags.typeName, + parameterName: hl.tags.propertyName, + className: hl.tags.typeName, + enumName: hl.tags.typeName, + fieldName: hl.tags.propertyName, + keyword: hl.tags.keyword, + lineBreak: undefined, + numericLiteral: hl.tags.number, + stringLiteral: hl.tags.string, + methodName: hl.tags.function(hl.tags.name), + operator: hl.tags.operator, + propertyName: hl.tags.propertyName, + punctuation: hl.tags.punctuation, + space: undefined, + text: undefined, + typeParameterName: hl.tags.typeName, + enumMemberName: hl.tags.propertyName, + regularExpressionLiteral: hl.tags.regexp, + link: hl.tags.link, + linkName: hl.tags.name, + linkText: hl.tags.link, +}; + +const BRACKET_TYPE = { + '(': hl.tags.paren, + ')': hl.tags.paren, + '[': hl.tags.squareBracket, + ']': hl.tags.squareBracket, + '}': hl.tags.brace, + '{': hl.tags.brace, + '<': hl.tags.angleBracket, + '>': hl.tags.angleBracket, +}; + +function highlightSymbolDisplayPart(sym: SymbolDisplayPart) { + if (sym.kind in TS_SYMBOL_TAG_TO_CODEMIRROR_TAG) { + const kind = sym.kind as keyof typeof TS_SYMBOL_TAG_TO_CODEMIRROR_TAG; + + if (kind === 'punctuation' && sym.text in BRACKET_TYPE) { + return BRACKET_TYPE[sym.text as keyof typeof BRACKET_TYPE]; + } + + return TS_SYMBOL_TAG_TO_CODEMIRROR_TAG[ + sym.kind as keyof typeof TS_SYMBOL_TAG_TO_CODEMIRROR_TAG + ]; + } + + console.warn(`Unknown symbol kind: ${sym.kind} (in "${sym.text}")`); + return undefined; +} + +function CodeMirrorTag(props: { + state: EditorState; + tag: hl.Tag | undefined; + children: ReactNode; +}) { + const {state, tag, children} = props; + const className = (tag && hl.HighlightStyle.get(state, tag)) ?? undefined; + if (className) { + return {children}; + } + return <>{children}; +} + +function SymbolDisplayParts(props: { + state: EditorState; + parts: SymbolDisplayPart[]; +}) { + const {state, parts} = props; + const items = parts.map((sym, i) => { + const tag = highlightSymbolDisplayPart(sym); + return ( + + {sym.text} + + ); + }); + return <>{items}; +} + +function QuickInfo(props: { + state: EditorState; + truncateDisplayParts?: boolean; + info: Omit; +}) { + const {state, info, truncateDisplayParts} = props; + const {displayParts, documentation, tags} = info; + + return ( + <> + {displayParts && ( +
+ + +
+ )} + {(documentation?.length || tags?.length) && ( +
+ {documentation && ( + + )} + {tags?.map((tag, i) => ( +
+ + @{tag.name} + + {tag.text && ( + <> + : + + )} +
+ ))} +
+ )} + + ); +} + +function renderIntoNode(node: Element, reactNode: ReactElement) { + const html = renderToStaticMarkup(reactNode); + node.innerHTML = html; +} + +interface Deferred { + promise: Promise; + resolve: (value: T) => void; + reject: (reason: unknown) => void; +} + +function deferred(): Deferred { + const deferred: Deferred = {} as any; + deferred.promise = new Promise((_resolve, _reject) => { + deferred.resolve = _resolve; + deferred.reject = _reject; + }); + return deferred; +} + +function throttleAsync( + wait: number, + fn: (...args: Args) => Promise +): (...args: Args) => Promise { + let timeout: number | undefined; + let latestArguments: Args; + let pending: Array> = []; + + const startTimeout = () => { + if (timeout === undefined) { + timeout = window.setTimeout(performFunctionCall, wait); + } + }; + + const performFunctionCall = async () => { + const toResolve = pending; + pending = []; + try { + const result = await fn(...latestArguments); + toResolve.forEach((p) => p.resolve(result)); + } catch (error) { + toResolve.forEach((p) => p.reject(error)); + } finally { + timeout = undefined; + // Handle calls that were enqueued while we were waiting for our async + // function. + if (pending.length) { + startTimeout(); + } + } + }; + + return (...args: Args) => { + latestArguments = args; + const result = deferred(); + pending.push(result); + startTimeout(); + return result.promise; + }; +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/debug.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/debug.ts new file mode 100644 index 00000000000..985eac6fcc6 --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/debug.ts @@ -0,0 +1,40 @@ +import debug, {Debugger} from 'debug'; + +export const DEBUG_ROOT = mixin(debug('jake.tl')); + +const DEBUG_EDITOR = mixin(DEBUG_ROOT.extend('editor')); +export const DEBUG_EDITOR_WORKER = mixin(DEBUG_EDITOR.extend('worker')); +export const DEBUG_EDITOR_RENDER = mixin(DEBUG_EDITOR.extend('render')); + +debug.enable(`${DEBUG_ROOT.namespace}:*`); + +export function helpers(dbg: Debugger) { + return { + tap: (fmt: string, val: T): T => tap(dbg, fmt, val), + + wrap: (fmt: string, f: (...args: In) => Out) => + wrap(dbg, fmt, f), + }; +} + +export function wrap( + dbg: Debugger, + fmt: string, + fn: (...args: In) => Out +): (...args: In) => Out { + return (...args) => { + const res = fn(...args); + dbg(fmt || fn.name, ...args, '->', res); + return res; + }; +} + +export function tap(dbg: Debugger, fmt: string, val: T): T { + dbg(fmt, val); + return val; +} + +export function mixin(dbg: Debugger): Debugger & ReturnType { + Object.assign(dbg, helpers(dbg)); + return dbg as any; +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/localStorageHelper.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/localStorageHelper.ts new file mode 100644 index 00000000000..d7037c541d2 --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/localStorageHelper.ts @@ -0,0 +1,11 @@ +/** + * Get localStorage, or undefined if not available. + */ +export function getLocalStorage(): Storage | undefined { + try { + return globalThis.localStorage; + } catch (error) { + console.warn('localStorage is not available:', error); + return undefined; + } +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts new file mode 100644 index 00000000000..08b4eba191e --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts @@ -0,0 +1,449 @@ +import {VirtualTypeScriptEnvironment} from '@typescript/vfs'; +import type {CompilerOptions} from 'typescript'; +import {DEBUG_EDITOR_WORKER} from './debug'; +import {ChannelServer} from './ChannelBridge'; +import TS from 'typescript'; + +declare const importScripts: (url: string) => void; +importScripts('https://unpkg.com/@typescript/vfs@1.3.5/dist/vfs.globals.js'); +importScripts( + 'https://cdnjs.cloudflare.com/ajax/libs/typescript/4.4.3/typescript.min.js' +); + +type TS = typeof import('typescript'); +export type VFS = typeof import('@typescript/vfs'); +export type Diagnostic = import('@codemirror/lint').Diagnostic; + +interface SerializedAction { + name: string; + data: TS.CodeFixAction; +} + +export interface SerializedDiagnostic extends Diagnostic { + serializedActions: SerializedAction[]; +} + +const getGlobalImport = (key: string): Type => (globalThis as any)[key]; +const { + createDefaultMapFromCDN, + createSystem, + createVirtualTypeScriptEnvironment, +} = getGlobalImport('tsvfs'); +const ts = getGlobalImport('ts'); + +// TODO: can we remove this? +// globalThis.localStorage = globalThis.localStorage ?? ({} as Storage); + +const BUCKET_URL = 'https://prod-packager-packages.codesandbox.io/v1/typings'; +const TYPES_REGISTRY = 'https://unpkg.com/types-registry@latest/index.json'; + +const wrappedPostMessage = DEBUG_EDITOR_WORKER.wrap('tx', postMessage); + +/** + * Fetch dependencies types from CodeSandbox CDN + */ +const fetchDependencyTyping = async ({ + name, + version, +}: { + name: string; + version: string; +}): Promise> => { + try { + const url = `${BUCKET_URL}/${name}/${version}.json`; + const {files} = await fetch(url).then((data) => data.json()); + DEBUG_EDITOR_WORKER('fetched types', name, version, files); + + return files; + } catch (error) { + console.warn(`Failed to fetch types: ${name}@${version}`, error); + return {}; + } +}; + +/** + * Process the TS compile options or default to + */ +const getCompileOptions = DEBUG_EDITOR_WORKER.wrap( + 'getCompilerOptions', + (tsconfigFile: Record): CompilerOptions => { + const defaultValue: CompilerOptions = { + target: ts.ScriptTarget.ES2021, + module: ts.ModuleKind.ES2020, + lib: ['es2021', 'es2020', 'dom', 'webworker'], + esModuleInterop: true, + allowJs: true, + }; + + if (tsconfigFile.compilerOptions) { + const blankSystem = createSystem(new Map()); + return ts.parseJsonConfigFileContent(tsconfigFile, blankSystem, '/') + .options; + } + + return defaultValue; + } +); + +const processTypescriptCacheFromStorage = ( + fsMapCached: Map +): Map => { + const cache = new Map(); + const matchVersion = Array.from(fsMapCached.keys()).every((file) => + file.startsWith(`ts-lib-${ts.version}`) + ); + + if (!matchVersion) cache; + + fsMapCached.forEach((value, key) => { + const cleanLibName = key.replace(`ts-lib-${ts.version}-`, ''); + cache.set(cleanLibName, value); + }); + + return cache; +}; + +const isValidTypeModule = (key: string, value?: {module: {code: string}}) => + key.endsWith('.d.ts') || + (key.endsWith('/package.json') && value?.module?.code); + +class TSServerWorker { + env: VirtualTypeScriptEnvironment | undefined; + + createTsSystem = async ( + files: Record, + entry: string, + fsMapCached: Map + ) => { + const tsFiles = new Map(); + const allFiles = new Map(); + const rootPaths = []; + const dependenciesMap = new Map(); + let tsconfig = null; + let packageJson = null; + let typeVersionsFromRegistry: Record; + + /** + * Collect files + */ + for (const filePath in files) { + const content = files[filePath].code; + allFiles.set(filePath, content); + DEBUG_EDITOR_WORKER('file', filePath, content); + if (filePath[0] !== '/') { + throw new Error(`Paths must be absolute: ${filePath}`); + } + + if (filePath === '/tsconfig.json') { + tsconfig = content; + } else if (filePath === '/package.json') { + packageJson = content; + } else if (/^[^.]+.tsx?$/.test(filePath)) { + // Only ts files + tsFiles.set(filePath, content); + rootPaths.push(filePath); + } + } + + const compilerOpts = getCompileOptions( + tsconfig ? JSON.parse(tsconfig) : {} + ); + + /** + * Process cache or get a fresh one + */ + let fsMap = processTypescriptCacheFromStorage(fsMapCached); + if (fsMap.size === 0) { + fsMap = await createDefaultMapFromCDN( + compilerOpts, + ts.version, + false, + ts + ); + } + + /** + * Post CDN payload to cache in the browser storage + */ + wrappedPostMessage({ + event: 'cache-typescript-fsmap', + details: {fsMap, version: ts.version}, + }); + + /** + * Add local files to the file-system + */ + allFiles.forEach((content, filePath) => { + fsMap.set(filePath, content); + }); + + /** + * Get dependencies from package.json + */ + const {dependencies, devDependencies} = packageJson + ? JSON.parse(packageJson) + : {dependencies: {}, devDependencies: {}}; + for (const dep in devDependencies ?? {}) { + dependenciesMap.set(dep, devDependencies[dep]); + } + + for (const dep in dependencies ?? {}) { + // Avoid redundant requests + if (!dependenciesMap.has(`@types/${dep}`)) { + dependenciesMap.set(dep, dependencies[dep]); + } + } + + /** + * Fetch dependencies types + */ + dependenciesMap.forEach(async (version, name) => { + // 1. CodeSandbox CDN + const files = await fetchDependencyTyping({name, version}); + const hasTypes = Object.keys(files).some( + (key) => key.startsWith('/' + name) && key.endsWith('.d.ts') + ); + + // 2. Types found + if (hasTypes) { + Object.entries(files).forEach(([key, value]) => { + if (isValidTypeModule(key, value)) { + fsMap.set(`/node_modules${key}`, value.module.code); + } + }); + + return; + } + + // 3. Types found: fetch types version from registry + if (!typeVersionsFromRegistry) { + typeVersionsFromRegistry = await fetch(TYPES_REGISTRY) + .then((data) => data.json()) + .then((data) => data.entries); + } + + // 4. Types found: no Look for types in @types register + const typingName = `@types/${name}`; + if (typeVersionsFromRegistry[name]) { + const atTypeFiles = await fetchDependencyTyping({ + name: typingName, + version: typeVersionsFromRegistry[name].latest, + }); + + Object.entries(atTypeFiles).forEach(([key, value]) => { + if (isValidTypeModule(key, value)) { + fsMap.set(`/node_modules${key}`, value.module.code); + } + }); + } + }); + + const system = createSystem(fsMap); + + this.env = createVirtualTypeScriptEnvironment( + system, + rootPaths, + ts, + compilerOpts + ); + + try { + return this.lintSystem(entry); + } catch (error) { + // Not ready? + console.error('todo', error); + } + }; + + lintSystem = (filePath: string) => { + const env = this.env; + if (!env) return; + + const SyntacticDiagnostics = + env.languageService.getSyntacticDiagnostics(filePath); + const SemanticDiagnostic = + env.languageService.getSemanticDiagnostics(filePath); + const SuggestionDiagnostics = + env.languageService.getSuggestionDiagnostics(filePath); + type Diagnostics = typeof SyntacticDiagnostics & + typeof SemanticDiagnostic & + typeof SuggestionDiagnostics; + const tsDiagnostics: Diagnostics = Array.prototype.concat( + SyntacticDiagnostics, + SemanticDiagnostic, + SuggestionDiagnostics + ); + + return tsDiagnostics.reduce((acc, result) => { + const from = result.start; + const to = result.start + result.length; + const codeActions = env.languageService.getCodeFixesAtPosition( + filePath, + from, + to, + [result.code], + {}, + {} + ); + + type ErrorMessageObj = { + messageText: string; + next?: ErrorMessageObj[]; + }; + type ErrorMessage = ErrorMessageObj | string; + + const messagesErrors = (message: ErrorMessage): string[] => { + if (typeof message === 'string') return [message]; + + const messageList: string[] = []; + const getMessage = (loop: ErrorMessageObj) => { + messageList.push(loop.messageText); + + if (loop.next) { + loop.next.forEach((item) => { + getMessage(item); + }); + } + }; + + getMessage(message); + + return messageList; + }; + + const severity: Diagnostic['severity'][] = [ + 'warning', + 'error', + 'info', + 'info', + ]; + + messagesErrors(result.messageText).forEach((message) => { + acc.push({ + from, + to, + message, + source: result?.source, + severity: severity[result.category], + serializedActions: codeActions.map((action) => { + return { + name: action.description, + data: action, + }; + }), + }); + }); + + return acc; + }, [] as SerializedDiagnostic[]); + }; + + infoAtPosition = (pos: number, filePath: string) => { + const result = this.env?.languageService.getQuickInfoAtPosition( + filePath, + pos + ); + + return result + ? { + result, + tootltipText: + ts.displayPartsToString(result.displayParts) + + (result.documentation?.length + ? '\n' + ts.displayPartsToString(result.documentation) + : ''), + } + : {result, tooltipText: ''}; + }; + + autocompleteAtPosition = (pos: number, filePath: string) => { + const completions = this.env?.languageService.getCompletionsAtPosition( + filePath, + pos, + { + includeCompletionsForImportStatements: true, + includeCompletionsWithInsertText: true, + includeCompletionsForModuleExports: true, + includeAutomaticOptionalChainCompletions: true, + includePackageJsonAutoImports: 'auto', + } + ); + + if (!completions) { + return; + } + + return { + ...completions, + entries: completions.entries.map((entry) => ({ + ...entry, + sourceDisplayString: ts.displayPartsToString(entry.sourceDisplay), + details: + entry.data && + this.env?.languageService.getCompletionEntryDetails( + filePath, + pos, + entry.name, + FormatCodeSettings, + entry.source, + undefined, + entry.data + ), + })), + }; + }; + + updateFile = (filePath: string, content: string) => { + try { + this.env?.updateFile(filePath, content); + } catch (error) { + if ( + error instanceof Error && + error.message.includes('Did not find a source file') + ) { + this.env?.createFile(filePath, content); + } else { + throw error; + } + } + }; + + applyCodeAction(action: TS.CodeActionCommand) { + const env = this.env; + if (!env) { + return; + } + + env.languageService.applyCodeActionCommand(action); + } + + formatFile(filePath: string) { + return this.env?.languageService.getFormattingEditsForDocument( + filePath, + FormatCodeSettings + ); + } +} + +const FormatCodeSettings: TS.FormatCodeSettings = { + semicolons: TS.SemicolonPreference.Insert, + trimTrailingWhitespace: true, + indentSize: 2, + tabSize: 2, + convertTabsToSpaces: true, + baseIndentSize: 2, + indentStyle: TS.IndentStyle.Smart, + insertSpaceAfterCommaDelimiter: true, + insertSpaceAfterKeywordsInControlFlowStatements: true, + insertSpaceAfterSemicolonInForStatements: true, + insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces: true, + insertSpaceBeforeAndAfterBinaryOperators: true, +}; + +export type {TSServerWorker}; + +ChannelServer.create({ + expose: new TSServerWorker(), + listenPort: globalThis, + responsePort: {postMessage: wrappedPostMessage}, +}); diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx new file mode 100644 index 00000000000..ce076c73f2a --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx @@ -0,0 +1,142 @@ +import {SandpackCodeEditor, useSandpack} from '@codesandbox/sandpack-react'; +import {memo, useEffect, useLayoutEffect, useMemo, useState} from 'react'; +import {DEBUG_EDITOR_RENDER} from './debug'; +import {ChannelClient, ChannelServer} from './ChannelBridge'; +import { + codemirrorTypescriptExtensions, + normalizePath, + normalizePaths, +} from './codemirrorExtensions'; +import {getLocalStorage} from './localStorageHelper'; +import type {TSServerWorker} from './tsserver.worker'; + +export const useTypescriptExtension = () => { + const [tsServerWorker] = useState(() => { + if (typeof Worker === 'undefined') { + return undefined; + } + + const worker = new Worker( + new URL('./tsserver.worker.ts', import.meta.url), + { + name: 'ts-server', + } + ); + + const postMessage = DEBUG_EDITOR_RENDER.wrap('tx', (msg) => + worker.postMessage(msg) + ); + + const renderer = new TSServerRender(getLocalStorage()); + + return { + worker, + renderer, + server: new ChannelServer({ + expose: renderer, + responsePort: {postMessage}, + }), + client: new ChannelClient({postMessage}, true), + }; + }); + + const {sandpack} = useSandpack(); + + // Subscribe to responses from the worker. + useEffect( + function listener() { + if (!tsServerWorker) { + return; + } + + tsServerWorker.worker.addEventListener( + 'message', + tsServerWorker.client.onMessage + ); + tsServerWorker.worker.addEventListener( + 'message', + tsServerWorker.server.onMessage + ); + return () => { + tsServerWorker.worker.removeEventListener( + 'message', + tsServerWorker.client.onMessage + ); + tsServerWorker.worker.removeEventListener( + 'message', + tsServerWorker.server.onMessage + ); + }; + }, + [tsServerWorker] + ); + + // Send setup data to the worker once. + useEffect(() => { + if (!tsServerWorker) { + return; + } + const cache = tsServerWorker.renderer.loadTypescriptCache(); + tsServerWorker.client.call( + 'createTsSystem', + normalizePaths(sandpack.files) as any /* TODO */, + normalizePath(sandpack.activePath), + cache + ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ + // other dependencies intentionally omitted - we should initialize once, then do incremental updates. + tsServerWorker, + ]); + + // const [tooltipNode, setTooltipNode] = useState(null); + // useLayoutEffect(() => { + // setTooltipNode(sandpack.lazyAnchorRef.current?.parentElement ?? null); + // }); + + const activePath = sandpack.activePath; + const extensions = useMemo(() => { + if (!tsServerWorker) { + return []; + } + + return codemirrorTypescriptExtensions( + tsServerWorker.client, + activePath + // tooltipNode + ); + }, [tsServerWorker?.client, activePath /* tooltipNode */]); + + return extensions; +}; + +class TSServerRender { + constructor(private storage: Storage | undefined) {} + + loadTypescriptCache() { + const cache = new Map(); + const storage = this.storage; + + if (storage) { + const keys = Object.keys(storage); + + keys.forEach((key) => { + if (key.startsWith('ts-lib-')) { + const item = storage.getItem(key); + if (item) { + cache.set(key, item); + } + } + }); + } + + return cache; + } + + saveTypescriptCache(version: string, fsMap: Map) { + fsMap.forEach((file, lib) => { + const cacheKey = 'ts-lib-' + version + '-' + lib; + this.storage?.setItem(cacheKey, file); + }); + } +} diff --git a/beta/src/components/MDX/Sandpack/useSandpackLint.tsx b/beta/src/components/MDX/Sandpack/useSandpackLint.tsx index ec05fbe0d0b..de7093838a0 100644 --- a/beta/src/components/MDX/Sandpack/useSandpackLint.tsx +++ b/beta/src/components/MDX/Sandpack/useSandpackLint.tsx @@ -28,6 +28,9 @@ export const useSandpackLint = () => { let {errors, codeMirrorErrors} = runESLint(editorState); // Ignore parsing or internal linter errors. const isReactRuleError = (error: any) => error.ruleId != null; + console.log('set lint errors'); + // XXX: this is being called very frequently (every second?) even when the editor is idle, + // which causes a re-render of the editor. setLintErrors(errors.filter(isReactRuleError)); return codeMirrorErrors.filter(isReactRuleError); }); diff --git a/beta/yarn.lock b/beta/yarn.lock index a149894d69c..0f187fcc489 100644 --- a/beta/yarn.lock +++ b/beta/yarn.lock @@ -846,6 +846,13 @@ dependencies: classnames "*" +"@types/debug@^4.1.7": + version "4.1.7" + resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82" + integrity sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg== + dependencies: + "@types/ms" "*" + "@types/eslint-visitor-keys@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d" @@ -887,6 +894,11 @@ dependencies: "@types/react" "*" +"@types/ms@*": + version "0.7.31" + resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197" + integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA== + "@types/node@^14.6.4": version "14.18.9" resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.9.tgz#0e5944eefe2b287391279a19b407aa98bd14436d" @@ -1034,6 +1046,13 @@ "@typescript-eslint/types" "4.33.0" eslint-visitor-keys "^2.0.0" +"@typescript/vfs@^1.3.5": + version "1.3.5" + resolved "https://registry.yarnpkg.com/@typescript/vfs/-/vfs-1.3.5.tgz#801e3c97b5beca4ff5b8763299ca5fd605b862b8" + integrity sha512-pI8Saqjupf9MfLw7w2+og+fmb0fZS0J6vsKXXrp4/PDXEFvntgzXmChCXC/KefZZS0YGS6AT8e0hGAJcTsdJlg== + dependencies: + debug "^4.1.1" + "@yarnpkg/lockfile@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31" @@ -1709,6 +1728,13 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.3: dependencies: ms "2.1.2" +debug@^4.3.4: + version "4.3.4" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" + integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== + dependencies: + ms "2.1.2" + deep-is@^0.1.3: version "0.1.4" resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" @@ -4828,10 +4854,10 @@ type-fest@^0.21.3: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37" integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w== -typescript@^4.0.2: - version "4.5.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3" - integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA== +typescript@^4.6.4: + version "4.6.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9" + integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg== unbox-primitive@^1.0.1: version "1.0.1" From 84ca01c188d2e076971981398f25328e9a21b89c Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Tue, 24 May 2022 17:04:08 -0700 Subject: [PATCH 02/70] fix race condition in type fetch logic --- .../sandpack-tsserver/tsserver.worker.ts | 110 +++++++++++------- 1 file changed, 68 insertions(+), 42 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts index 08b4eba191e..ab575078f82 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts @@ -42,7 +42,7 @@ const wrappedPostMessage = DEBUG_EDITOR_WORKER.wrap('tx', postMessage); /** * Fetch dependencies types from CodeSandbox CDN */ -const fetchDependencyTyping = async ({ +const fetchTypesFromCodeSandboxBucket = async ({ name, version, }: { @@ -61,6 +61,25 @@ const fetchDependencyTyping = async ({ } }; +interface TypeRegistryJson { + entries: Record< + string, + { + latest: string; + } + >; +} + +/** + * Pull the list of @types/... packages from the "types-registry" package. + * @see https://www.npmjs.com/package/types-registry + */ +const getDefinitelyTypedPackageMapping = async () => { + const request = await fetch(TYPES_REGISTRY); + const json: TypeRegistryJson = await request.json(); + return json.entries; +}; + /** * Process the TS compile options or default to */ @@ -73,6 +92,8 @@ const getCompileOptions = DEBUG_EDITOR_WORKER.wrap( lib: ['es2021', 'es2020', 'dom', 'webworker'], esModuleInterop: true, allowJs: true, + checkJs: true, + jsx: TS.JsxEmit.ReactJSXDev, }; if (tsconfigFile.compilerOptions) { @@ -118,10 +139,12 @@ class TSServerWorker { const tsFiles = new Map(); const allFiles = new Map(); const rootPaths = []; - const dependenciesMap = new Map(); + type PackageName = string; + type Version = string; + const dependenciesMap = new Map(); let tsconfig = null; let packageJson = null; - let typeVersionsFromRegistry: Record; + let typeRegistryFetchPromise: Promise>; /** * Collect files @@ -138,7 +161,7 @@ class TSServerWorker { tsconfig = content; } else if (filePath === '/package.json') { packageJson = content; - } else if (/^[^.]+.tsx?$/.test(filePath)) { + } else if (/^[^.]+.(t|j)sx?$/.test(filePath)) { // Only ts files tsFiles.set(filePath, content); rootPaths.push(filePath); @@ -197,46 +220,49 @@ class TSServerWorker { /** * Fetch dependencies types */ - dependenciesMap.forEach(async (version, name) => { - // 1. CodeSandbox CDN - const files = await fetchDependencyTyping({name, version}); - const hasTypes = Object.keys(files).some( - (key) => key.startsWith('/' + name) && key.endsWith('.d.ts') - ); - - // 2. Types found - if (hasTypes) { - Object.entries(files).forEach(([key, value]) => { - if (isValidTypeModule(key, value)) { - fsMap.set(`/node_modules${key}`, value.module.code); - } - }); - - return; - } - - // 3. Types found: fetch types version from registry - if (!typeVersionsFromRegistry) { - typeVersionsFromRegistry = await fetch(TYPES_REGISTRY) - .then((data) => data.json()) - .then((data) => data.entries); - } + await Promise.all( + Array.from(dependenciesMap).map(async ([name, version]) => { + // Try to fetch types of current version directly from the CDN. + // This will work if the package contains .d.ts files. + const files = await fetchTypesFromCodeSandboxBucket({name, version}); + const hasTypes = Object.keys(files).some( + (key) => key.startsWith('/' + name) && key.endsWith('.d.ts') + ); + + // Types found at current version - add them to the filesystem. + if (hasTypes) { + Object.entries(files).forEach(([key, value]) => { + if (isValidTypeModule(key, value)) { + fsMap.set(`/node_modules${key}`, value.module.code); + } + }); + + return; + } - // 4. Types found: no Look for types in @types register - const typingName = `@types/${name}`; - if (typeVersionsFromRegistry[name]) { - const atTypeFiles = await fetchDependencyTyping({ - name: typingName, - version: typeVersionsFromRegistry[name].latest, - }); + // Pull the list of @types/... packages from the "types-registry" package. + // https://www.npmjs.com/package/types-registry + if (!typeRegistryFetchPromise) { + typeRegistryFetchPromise = getDefinitelyTypedPackageMapping(); + } - Object.entries(atTypeFiles).forEach(([key, value]) => { - if (isValidTypeModule(key, value)) { - fsMap.set(`/node_modules${key}`, value.module.code); - } - }); - } - }); + // If types are available in the registry, use them. + const typingName = `@types/${name}`; + const registryEntries = await typeRegistryFetchPromise; + if (registryEntries[name]) { + const atTypeFiles = await fetchTypesFromCodeSandboxBucket({ + name: typingName, + version: registryEntries[name].latest, + }); + + Object.entries(atTypeFiles).forEach(([key, value]) => { + if (isValidTypeModule(key, value)) { + fsMap.set(`/node_modules${key}`, value.module.code); + } + }); + } + }) + ); const system = createSystem(fsMap); From 0f4432a28862303698a46839631ffea83753e796 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Tue, 24 May 2022 17:28:59 -0700 Subject: [PATCH 03/70] Wrap sandbox editor in React.memo to avoid weird glitching --- .../components/MDX/Sandpack/CustomPreset.tsx | 44 ++++++++++++++----- .../MDX/Sandpack/useSandpackLint.tsx | 3 +- 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index 6e67ff770fd..4d228b812c3 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -10,6 +10,8 @@ import { SandpackCodeEditor, SandpackThemeProvider, SandpackReactDevTools, + CodeEditorProps, + CodeEditorRef, } from '@codesandbox/sandpack-react'; import scrollIntoView from 'scroll-into-view-if-needed'; import cn from 'classnames'; @@ -35,16 +37,12 @@ export function CustomPreset({ devToolsLoaded: boolean; onDevToolsLoad: () => void; }) { - // Codemirror extensions const {lintErrors, lintExtensions} = useSandpackLint(); const typescriptExtensions = useTypescriptExtension(); - let forceSandpackRemountKeyRef = React.useRef(0); - const extensions = React.useMemo(() => { - // Whenever an extension changes, we need to remount - forceSandpackRemountKeyRef.current++; - const result = [lintExtensions, typescriptExtensions].flat(); - return result; - }, [lintExtensions, typescriptExtensions]); + const extensions = React.useMemo( + () => [lintExtensions, typescriptExtensions].flat(), + [lintExtensions, typescriptExtensions] + ); const lineCountRef = React.useRef<{[key: string]: number}>({}); const containerRef = React.useRef(null); @@ -73,8 +71,7 @@ export function CustomPreset({ showDevTools && devToolsLoaded && 'sp-layout-devtools', isExpanded && 'sp-layout-expanded' )}> - ); } + +const MemoCodeEditor = React.memo( + React.forwardRef((props, ref) => { + const {extensions, ...rest} = props; + + // Conspire to re-mount SandpackCodeEditor if extensions change. + const keyRef = React.useRef(0); + const prevExtensions = React.useRef(extensions); + if (prevExtensions.current !== extensions) { + keyRef.current++; + } + prevExtensions.current = extensions; + + console.log('MemoCodeEditor', keyRef.current, extensions); + + return ( + + ); + }) +); + +MemoCodeEditor.displayName = 'MemoCodeEditor'; diff --git a/beta/src/components/MDX/Sandpack/useSandpackLint.tsx b/beta/src/components/MDX/Sandpack/useSandpackLint.tsx index de7093838a0..3b7c37b13a7 100644 --- a/beta/src/components/MDX/Sandpack/useSandpackLint.tsx +++ b/beta/src/components/MDX/Sandpack/useSandpackLint.tsx @@ -28,9 +28,8 @@ export const useSandpackLint = () => { let {errors, codeMirrorErrors} = runESLint(editorState); // Ignore parsing or internal linter errors. const isReactRuleError = (error: any) => error.ruleId != null; - console.log('set lint errors'); // XXX: this is being called very frequently (every second?) even when the editor is idle, - // which causes a re-render of the editor. + // which causes a re-render of all editor-related components. setLintErrors(errors.filter(isReactRuleError)); return codeMirrorErrors.filter(isReactRuleError); }); From a1095bb0903b2c1bb428a7abbe478497c93383ff Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 05:12:40 -0700 Subject: [PATCH 04/70] remove unneeded component --- .../sandpack-tsserver/SandpackTypescript.tsx | 62 ------------------- 1 file changed, 62 deletions(-) delete mode 100644 beta/src/components/MDX/Sandpack/sandpack-tsserver/SandpackTypescript.tsx diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/SandpackTypescript.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/SandpackTypescript.tsx deleted file mode 100644 index 842b2d13348..00000000000 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/SandpackTypescript.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { - SandpackConsumer, - SandpackLayout, - SandpackPreview, - SandpackProvider, - SandpackSetup, - SandpackThemeProvider, - SandpackPredefinedTemplate, - SandpackThemeProp, - SandpackFiles, -} from '@codesandbox/sandpack-react'; -import '@codesandbox/sandpack-react/dist/index.css'; -import React from 'react'; -import {CodeEditor} from './CodeEditor'; - -declare module '@codesandbox/sandpack-react' { - interface SandpackProviderProps { - children?: React.ReactNode; - } - - // @ts-expect-error Force allow overriding variables - const SandpackThemeProvider: React.FC<{ - theme?: SandpackThemeProp; - children?: React.ReactNode; - }>; -} - -export const SandpackTypescript: React.FC<{ - theme?: SandpackThemeProp; - files?: SandpackFiles; - customSetup?: SandpackSetup; - template: SandpackPredefinedTemplate; -}> = ({customSetup, template, theme}) => { - return ( -
- - - - - - - - -
- ); -}; - -export function SandpackTypescriptEditor() { - return ( - - {(state) => } - - ); -} - -type wat = JSX.Element; From 28941e53dac7cf84f24c5d684f7620f2f7f16902 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 05:14:20 -0700 Subject: [PATCH 05/70] clearer name for normalizePath --- .../codemirrorExtensions.tsx | 64 +++++++++++-------- .../useTypescriptExtension.tsx | 8 +-- 2 files changed, 43 insertions(+), 29 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 13d5604ba0c..3bba4d7b556 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -26,24 +26,6 @@ import {DEBUG_EDITOR_RENDER} from './debug'; import {ChannelClient} from './ChannelBridge'; import type {TSServerWorker} from './tsserver.worker'; -export function normalizePath(path: string): string; -export function normalizePath(path: undefined): undefined; -export function normalizePath(path: string | undefined) { - if (path === undefined) { - return path; - } - if (path[0] === '/') { - return path; - } - return `/${path}`; -} - -export function normalizePaths(fs: SandpackFiles): SandpackFiles { - return Object.fromEntries( - Object.entries(fs).map(([key, value]) => [normalizePath(key), value]) - ); -} - export const codemirrorTypescriptExtensions = ( client: ChannelClient, filePath: string | undefined, @@ -59,8 +41,15 @@ export const codemirrorTypescriptExtensions = ( } void (async () => { const contents = target.state.doc.toJSON().join('\n'); - await client.call('updateFile', normalizePath(filePath), contents); - const changes = await client.call('formatFile', normalizePath(filePath)); + await client.call( + 'updateFile', + ensurePathStartsWithSlash(filePath), + contents + ); + const changes = await client.call( + 'formatFile', + ensurePathStartsWithSlash(filePath) + ); if (!changes) { return; } @@ -88,7 +77,7 @@ export const codemirrorTypescriptExtensions = ( previousFileContent = newFileContent; client.call( 'updateFile', - normalizePath(filePath), + ensurePathStartsWithSlash(filePath), update.state.doc.toJSON().join('\n') ); } @@ -109,7 +98,7 @@ export const codemirrorTypescriptExtensions = ( (await client.call( 'autocompleteAtPosition', pos, - normalizePath(filePath) + ensurePathStartsWithSlash(filePath) )); if (!completions) { @@ -270,7 +259,11 @@ export const codemirrorTypescriptExtensions = ( hoverTooltip( async (_: EditorView, pos: number): Promise => { const allInfo = filePath - ? await client.call('infoAtPosition', pos, normalizePath(filePath)) + ? await client.call( + 'infoAtPosition', + pos, + ensurePathStartsWithSlash(filePath) + ) : undefined; if (!allInfo) { @@ -320,7 +313,7 @@ export const codemirrorTypescriptExtensions = ( const diagnostics = await client.call( 'lintSystem', - normalizePath(filePath) + ensurePathStartsWithSlash(filePath) ); if (!diagnostics) { @@ -420,7 +413,7 @@ function getCodemirrorFileChanges( filePath: string ) { return changes.flatMap((fileEdit) => { - if (fileEdit.fileName !== normalizePath(filePath)) { + if (fileEdit.fileName !== ensurePathStartsWithSlash(filePath)) { console.warn('Unable to apply changes to other files', fileEdit); return []; } @@ -635,3 +628,24 @@ function throttleAsync( return result.promise; }; } + +export function ensurePathStartsWithSlash(path: string): string; +export function ensurePathStartsWithSlash(path: undefined): undefined; +export function ensurePathStartsWithSlash(path: string | undefined) { + if (path === undefined) { + return path; + } + if (path[0] === '/') { + return path; + } + return `/${path}`; +} + +export function ensureAllPathsStartWithSlash(fs: SandpackFiles): SandpackFiles { + return Object.fromEntries( + Object.entries(fs).map(([key, value]) => [ + ensurePathStartsWithSlash(key), + value, + ]) + ); +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx index ce076c73f2a..f0c8e554d8a 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx @@ -4,8 +4,8 @@ import {DEBUG_EDITOR_RENDER} from './debug'; import {ChannelClient, ChannelServer} from './ChannelBridge'; import { codemirrorTypescriptExtensions, - normalizePath, - normalizePaths, + ensurePathStartsWithSlash, + ensureAllPathsStartWithSlash, } from './codemirrorExtensions'; import {getLocalStorage} from './localStorageHelper'; import type {TSServerWorker} from './tsserver.worker'; @@ -79,8 +79,8 @@ export const useTypescriptExtension = () => { const cache = tsServerWorker.renderer.loadTypescriptCache(); tsServerWorker.client.call( 'createTsSystem', - normalizePaths(sandpack.files) as any /* TODO */, - normalizePath(sandpack.activePath), + ensureAllPathsStartWithSlash(sandpack.files) as any /* TODO */, + ensurePathStartsWithSlash(sandpack.activePath), cache ); // eslint-disable-next-line react-hooks/exhaustive-deps From da96af48c364464775361194b185c9813c56be88 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 05:26:10 -0700 Subject: [PATCH 06/70] better comment on advanced autcomplete insertion --- .../codemirrorExtensions.tsx | 68 ++----------------- 1 file changed, 7 insertions(+), 61 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 3bba4d7b556..b3fb5ff592a 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -102,16 +102,12 @@ export const codemirrorTypescriptExtensions = ( )); if (!completions) { - console.log('Unable to get completions', {pos}); + DEBUG_EDITOR_RENDER('Unable to get completions', {pos}); return null; } return completeFromList( completions.entries.map((c, i) => { - if (c.name === 'useRef') { - console.log(`completion ${i}:`, c); - } - const details = c.details; const description = details?.codeActions?.at(0)?.description; const source = @@ -136,8 +132,11 @@ export const codemirrorTypescriptExtensions = ( const apply = c.name; - // TODO: this is messed yp - // debugger; + // TODO: currently we re-implement codemirror/autocomplete's default behavior + // because we couldn't have both a custom action and do the default. + // Upstream added a helper, but upgrading autocomplete requires a bump in many + // codemirror-related packages. + // See https://github.com/codemirror/autocomplete/blob/main/CHANGELOG.md#0202-2022-05-24 const matchedPrefix = ctx.matchBefore(/\w+/) ?? DEBUG_EDITOR_RENDER.tap('fallback', { @@ -153,59 +152,6 @@ export const codemirrorTypescriptExtensions = ( insert: apply, }; - // Copied from here: - // https://github.com/codemirror/autocomplete/blob/97bf06555c5028ca9930576fb05e5f809a2d604f/src/completion.ts#L213-L229 - // But, we don't have the things we need to use it. - // const insertLabelChanges = view.state.changeByRange( - // (range) => { - // if (range == view.state.selection.main) - // return { - // changes: { - // from: baseLabelChange.from, - // to: baseLabelChange.to, - // insert: apply, - // }, - // range: EditorSelection.cursor( - // baseLabelChange.from + apply.length - // ), - // }; - // const len = - // baseLabelChange.to - baseLabelChange.from; - // if ( - // !range.empty || - // (len && - // view.state.sliceDoc( - // range.from - len, - // range.from - // ) != - // view.state.sliceDoc( - // baseLabelChange.from, - // baseLabelChange.to - // )) - // ) - // return { range }; - // return { - // changes: { - // from: range.from - len, - // to: range.from, - // insert: apply, - // }, - // range: EditorSelection.cursor( - // range.from - len + apply.length - // ), - // }; - // } - // ); - - console.log( - 'change', - baseLabelChange, - ctx.state.sliceDoc( - baseLabelChange.from, - baseLabelChange.to - ) - ); - view.dispatch({ // ...insertLabelChanges, changes: [ @@ -248,7 +194,7 @@ export const codemirrorTypescriptExtensions = ( }) )(ctx); } catch (e) { - console.log('Unable to get completions', {pos, error: e}); + DEBUG_EDITOR_RENDER('Unable to get completions', {pos, error: e}); return null; } } From fd40c1cadcab4ab6aac66a642c1dc907a3040cdf Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 05:33:01 -0700 Subject: [PATCH 07/70] remove unneeded tooltip optimizations --- .../codemirrorExtensions.tsx | 14 +++---------- .../useTypescriptExtension.tsx | 21 ++++++------------- 2 files changed, 9 insertions(+), 26 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index b3fb5ff592a..3b8e1f33e74 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -15,21 +15,20 @@ import { openLintPanel, } from '@codemirror/lint'; import {EditorState} from '@codemirror/state'; -import {hoverTooltip, Tooltip, tooltips} from '@codemirror/tooltip'; +import {hoverTooltip, Tooltip} from '@codemirror/tooltip'; import {Command, EditorView, keymap, ViewUpdate} from '@codemirror/view'; import {SandpackFiles} from '@codesandbox/sandpack-react'; import {ReactElement, ReactNode} from 'react'; import {renderToStaticMarkup} from 'react-dom/server'; import type ts from 'typescript'; import {SymbolDisplayPart, SymbolDisplayPartKind} from 'typescript'; -import {DEBUG_EDITOR_RENDER} from './debug'; import {ChannelClient} from './ChannelBridge'; +import {DEBUG_EDITOR_RENDER} from './debug'; import type {TSServerWorker} from './tsserver.worker'; export const codemirrorTypescriptExtensions = ( client: ChannelClient, - filePath: string | undefined, - tooltipRef?: HTMLElement | null | undefined + filePath: string | undefined ) => { DEBUG_EDITOR_RENDER( 'codemirrorTypescriptExtensions(filePath: "%s")', @@ -63,13 +62,6 @@ export const codemirrorTypescriptExtensions = ( let previousFileContent: string | undefined; return [ - tooltips({ - // Fixed mode doesn't work well if your document scrolls! - position: 'absolute', - // TODO: this doesn't seem to work! - parent: DEBUG_EDITOR_RENDER.tap('tooltipRef', tooltipRef) ?? undefined, - }), - EditorView.updateListener.of((update: ViewUpdate) => { if (filePath) { const newFileContent = update.state.doc.toJSON().join('\n'); diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx index f0c8e554d8a..f1431387bfd 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx @@ -1,12 +1,12 @@ -import {SandpackCodeEditor, useSandpack} from '@codesandbox/sandpack-react'; -import {memo, useEffect, useLayoutEffect, useMemo, useState} from 'react'; -import {DEBUG_EDITOR_RENDER} from './debug'; +import {useSandpack} from '@codesandbox/sandpack-react'; +import {useEffect, useMemo, useState} from 'react'; import {ChannelClient, ChannelServer} from './ChannelBridge'; import { codemirrorTypescriptExtensions, - ensurePathStartsWithSlash, ensureAllPathsStartWithSlash, + ensurePathStartsWithSlash, } from './codemirrorExtensions'; +import {DEBUG_EDITOR_RENDER} from './debug'; import {getLocalStorage} from './localStorageHelper'; import type {TSServerWorker} from './tsserver.worker'; @@ -89,23 +89,14 @@ export const useTypescriptExtension = () => { tsServerWorker, ]); - // const [tooltipNode, setTooltipNode] = useState(null); - // useLayoutEffect(() => { - // setTooltipNode(sandpack.lazyAnchorRef.current?.parentElement ?? null); - // }); - const activePath = sandpack.activePath; const extensions = useMemo(() => { if (!tsServerWorker) { return []; } - return codemirrorTypescriptExtensions( - tsServerWorker.client, - activePath - // tooltipNode - ); - }, [tsServerWorker?.client, activePath /* tooltipNode */]); + return codemirrorTypescriptExtensions(tsServerWorker.client, activePath); + }, [tsServerWorker, activePath]); return extensions; }; From 758ea90c837f22f88ca4b8a4f16d4f2cd0e00226 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 05:39:35 -0700 Subject: [PATCH 08/70] minor cleanups and renaming for clarity --- .../codemirrorExtensions.tsx | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 3b8e1f33e74..cfc27095787 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -53,7 +53,7 @@ export const codemirrorTypescriptExtensions = ( return; } target.dispatch({ - changes: getCodemirrorChanges(target.state, changes), + changes: tsTextChangesToCodemirrorChanges(target.state, changes), }); })(); return true; @@ -115,7 +115,7 @@ export const codemirrorTypescriptExtensions = ( apply: actions ? (view) => { const codeActionChanges = actions.flatMap((action) => - getCodemirrorFileChanges( + tsFileTextChangesToCodemirrorChanges( view.state, action.changes, filePath @@ -177,8 +177,7 @@ export const codemirrorTypescriptExtensions = ( ); return container; }, - // detail: c. - // TODO:: populate details and info + // TODO: double-check ranking makes sense. boost: 1 / Number(c.sortText), }; @@ -208,7 +207,7 @@ export const codemirrorTypescriptExtensions = ( return null; } - const {result: quickInfo, tootltipText} = allInfo; + const quickInfo = allInfo.result; if (!quickInfo) return null; @@ -272,7 +271,7 @@ export const codemirrorTypescriptExtensions = ( } applied = true; - const changes = getCodemirrorFileChanges( + const changes = tsFileTextChangesToCodemirrorChanges( editor.state, action.data.changes, filePath @@ -297,9 +296,6 @@ export const codemirrorTypescriptExtensions = ( ), EditorView.baseTheme({ - // ".cm-diagnostic-info": { - // borderLeft: "5px solid var(--sp-colors-fg-default)", - // }, '.quickinfo-monospace': { fontFamily: `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, fontSize: '87%', @@ -345,7 +341,7 @@ export const codemirrorTypescriptExtensions = ( ]; }; -function getCodemirrorFileChanges( +function tsFileTextChangesToCodemirrorChanges( state: EditorState, changes: ts.FileTextChanges[], filePath: string @@ -356,11 +352,11 @@ function getCodemirrorFileChanges( return []; } - return getCodemirrorChanges(state, fileEdit.textChanges); + return tsTextChangesToCodemirrorChanges(state, fileEdit.textChanges); }); } -function getCodemirrorChanges( +function tsTextChangesToCodemirrorChanges( state: EditorState, changes: readonly ts.TextChange[] ) { From e4d0f0e009f5c654482de8fc3d3efa90807bc5cc Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 05:44:25 -0700 Subject: [PATCH 09/70] extract required extensions --- .../codemirrorExtensions.tsx | 41 +++++++++++-------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index cfc27095787..f95c13383bd 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -59,23 +59,8 @@ export const codemirrorTypescriptExtensions = ( return true; }; - let previousFileContent: string | undefined; - return [ - EditorView.updateListener.of((update: ViewUpdate) => { - if (filePath) { - const newFileContent = update.state.doc.toJSON().join('\n'); - if (newFileContent !== previousFileContent) { - previousFileContent = newFileContent; - client.call( - 'updateFile', - ensurePathStartsWithSlash(filePath), - update.state.doc.toJSON().join('\n') - ); - } - } - }), - + requiredExtensions(client, filePath), autocompletion({ activateOnTyping: true, override: [ @@ -294,6 +279,28 @@ export const codemirrorTypescriptExtensions = ( }, {delay: 400} ), + ]; +}; + +function requiredExtensions( + client: ChannelClient, + filePath: string | undefined +) { + let previousFileContent: string | undefined; + return [ + EditorView.updateListener.of((update: ViewUpdate) => { + if (filePath) { + const newFileContent = update.state.doc.toJSON().join('\n'); + if (newFileContent !== previousFileContent) { + previousFileContent = newFileContent; + client.call( + 'updateFile', + ensurePathStartsWithSlash(filePath), + update.state.doc.toJSON().join('\n') + ); + } + } + }), EditorView.baseTheme({ '.quickinfo-monospace': { @@ -339,7 +346,7 @@ export const codemirrorTypescriptExtensions = ( }, }), ]; -}; +} function tsFileTextChangesToCodemirrorChanges( state: EditorState, From 261502ba4a3351cb20523d971b0ae08b90f8d6ea Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 05:52:16 -0700 Subject: [PATCH 10/70] extract format extension --- .../codemirrorExtensions.tsx | 75 +++++++++++-------- .../sandpack-tsserver/tsserver.worker.ts | 1 - 2 files changed, 43 insertions(+), 33 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index f95c13383bd..5ff85f1875a 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -34,33 +34,10 @@ export const codemirrorTypescriptExtensions = ( 'codemirrorTypescriptExtensions(filePath: "%s")', filePath ); - const formatCode: Command = (target) => { - if (!filePath) { - return false; - } - void (async () => { - const contents = target.state.doc.toJSON().join('\n'); - await client.call( - 'updateFile', - ensurePathStartsWithSlash(filePath), - contents - ); - const changes = await client.call( - 'formatFile', - ensurePathStartsWithSlash(filePath) - ); - if (!changes) { - return; - } - target.dispatch({ - changes: tsTextChangesToCodemirrorChanges(target.state, changes), - }); - })(); - return true; - }; return [ requiredExtensions(client, filePath), + formatExtension(client, filePath), autocompletion({ activateOnTyping: true, override: [ @@ -217,14 +194,6 @@ export const codemirrorTypescriptExtensions = ( key: 'Cmd-.', run: (editor) => openLintPanel(editor) || closeLintPanel(editor), }, - { - key: 'Shift-Alt-f', - run: formatCode, - }, - { - key: 'Mod-s', - run: formatCode, - }, ]), linter( @@ -348,6 +317,48 @@ function requiredExtensions( ]; } +function formatExtension( + client: ChannelClient, + filePath: string | undefined +) { + const formatCode: Command = (target) => { + if (!filePath) { + return false; + } + void (async () => { + const contents = target.state.doc.toJSON().join('\n'); + await client.call( + 'updateFile', + ensurePathStartsWithSlash(filePath), + contents + ); + const changes = await client.call( + 'formatFile', + ensurePathStartsWithSlash(filePath) + ); + if (!changes) { + return; + } + target.dispatch({ + changes: tsTextChangesToCodemirrorChanges(target.state, changes), + }); + })(); + return true; + }; + return [ + keymap.of([ + { + key: 'Shift-Alt-f', + run: formatCode, + }, + { + key: 'Mod-s', + run: formatCode, + }, + ]), + ]; +} + function tsFileTextChangesToCodemirrorChanges( state: EditorState, changes: ts.FileTextChanges[], diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts index ab575078f82..9f17c57333b 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts @@ -457,7 +457,6 @@ const FormatCodeSettings: TS.FormatCodeSettings = { indentSize: 2, tabSize: 2, convertTabsToSpaces: true, - baseIndentSize: 2, indentStyle: TS.IndentStyle.Smart, insertSpaceAfterCommaDelimiter: true, insertSpaceAfterKeywordsInControlFlowStatements: true, From bb4aeaea816201387de804bd0f26ff7a528c395c Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 05:54:57 -0700 Subject: [PATCH 11/70] extract diagnostic extension --- .../codemirrorExtensions.tsx | 128 ++++++++++-------- 1 file changed, 68 insertions(+), 60 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 5ff85f1875a..8c4a9eede17 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -38,6 +38,7 @@ export const codemirrorTypescriptExtensions = ( return [ requiredExtensions(client, filePath), formatExtension(client, filePath), + diagnosticExtension(client, filePath), autocompletion({ activateOnTyping: true, override: [ @@ -188,66 +189,6 @@ export const codemirrorTypescriptExtensions = ( }, {hideOnChange: true} ), - - keymap.of([ - { - key: 'Cmd-.', - run: (editor) => openLintPanel(editor) || closeLintPanel(editor), - }, - ]), - - linter( - async (): Promise => { - if (!filePath) { - return []; - } - - const diagnostics = await client.call( - 'lintSystem', - ensurePathStartsWithSlash(filePath) - ); - - if (!diagnostics) { - return []; - } - - return diagnostics.map((diagnostic) => { - const {serializedActions, ...valid} = diagnostic; - return { - ...valid, - actions: serializedActions.map((action) => { - let applied = false; - return { - name: action.name, - apply: (editor) => { - if (applied) { - return; - } - applied = true; - - const changes = tsFileTextChangesToCodemirrorChanges( - editor.state, - action.data.changes, - filePath - ); - - editor.dispatch({ - changes, - }); - - if (action.data.commands) { - client.call('applyCodeAction', action.data.commands); - } - - forceLinting(editor); - }, - }; - }), - }; - }); - }, - {delay: 400} - ), ]; }; @@ -359,6 +300,73 @@ function formatExtension( ]; } +function diagnosticExtension( + client: ChannelClient, + filePath: string | undefined +) { + return [ + keymap.of([ + { + key: 'Cmd-.', + run: (editor) => openLintPanel(editor) || closeLintPanel(editor), + }, + ]), + + linter( + async (): Promise => { + if (!filePath) { + return []; + } + + const diagnostics = await client.call( + 'lintSystem', + ensurePathStartsWithSlash(filePath) + ); + + if (!diagnostics) { + return []; + } + + return diagnostics.map((diagnostic) => { + const {serializedActions, ...valid} = diagnostic; + return { + ...valid, + actions: serializedActions.map((action) => { + let applied = false; + return { + name: action.name, + apply: (editor) => { + if (applied) { + return; + } + applied = true; + + const changes = tsFileTextChangesToCodemirrorChanges( + editor.state, + action.data.changes, + filePath + ); + + editor.dispatch({ + changes, + }); + + if (action.data.commands) { + client.call('applyCodeAction', action.data.commands); + } + + forceLinting(editor); + }, + }; + }), + }; + }); + }, + {delay: 400} + ), + ]; +} + function tsFileTextChangesToCodemirrorChanges( state: EditorState, changes: ts.FileTextChanges[], From 737f98f185f8831bbe0a3fd3fd2505ec6cb4f5b6 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 05:56:29 -0700 Subject: [PATCH 12/70] extract autocompletion extension --- .../codemirrorExtensions.tsx | 238 +++++++++--------- 1 file changed, 122 insertions(+), 116 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 8c4a9eede17..08804c2b084 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -39,122 +39,7 @@ export const codemirrorTypescriptExtensions = ( requiredExtensions(client, filePath), formatExtension(client, filePath), diagnosticExtension(client, filePath), - autocompletion({ - activateOnTyping: true, - override: [ - throttleAsync( - 150, - async (ctx: CompletionContext): Promise => { - const {pos} = ctx; - - try { - const completions = - filePath && - (await client.call( - 'autocompleteAtPosition', - pos, - ensurePathStartsWithSlash(filePath) - )); - - if (!completions) { - DEBUG_EDITOR_RENDER('Unable to get completions', {pos}); - return null; - } - - return completeFromList( - completions.entries.map((c, i) => { - const details = c.details; - const description = details?.codeActions?.at(0)?.description; - const source = - details?.sourceDisplay - ?.map((token) => token.text) - .join('') || c.sourceDisplayString; - const actions = details?.codeActions; - - const suggestions: Completion = { - type: c.kind, - label: c.name, - detail: source, - apply: actions - ? (view) => { - const codeActionChanges = actions.flatMap((action) => - tsFileTextChangesToCodemirrorChanges( - view.state, - action.changes, - filePath - ) - ); - - const apply = c.name; - - // TODO: currently we re-implement codemirror/autocomplete's default behavior - // because we couldn't have both a custom action and do the default. - // Upstream added a helper, but upgrading autocomplete requires a bump in many - // codemirror-related packages. - // See https://github.com/codemirror/autocomplete/blob/main/CHANGELOG.md#0202-2022-05-24 - const matchedPrefix = - ctx.matchBefore(/\w+/) ?? - DEBUG_EDITOR_RENDER.tap('fallback', { - from: Math.min( - ctx.pos, - view.state.selection.main.from - ), - to: view.state.selection.main.to, - }); - const baseLabelChange = { - from: matchedPrefix.from, - to: view.state.selection.main.to, - insert: apply, - }; - - view.dispatch({ - // ...insertLabelChanges, - changes: [ - // insertLabelChanges.changes, - baseLabelChange, - ...codeActionChanges, - ], - annotations: pickedCompletion.of(suggestions), - }); - } - : undefined, - info: - details && - function () { - const container = document.createElement('div'); - renderIntoNode( - container, - - <> - {description && ( -
- {description} -
- )} - - - ); - return container; - }, - // TODO: double-check ranking makes sense. - boost: 1 / Number(c.sortText), - }; - - return suggestions; - }) - )(ctx); - } catch (e) { - DEBUG_EDITOR_RENDER('Unable to get completions', {pos, error: e}); - return null; - } - } - ), - ], - }), + autocompleteExtension(client, filePath), hoverTooltip( async (_: EditorView, pos: number): Promise => { @@ -367,6 +252,127 @@ function diagnosticExtension( ]; } +function autocompleteExtension( + client: ChannelClient, + filePath: string | undefined +) { + return autocompletion({ + activateOnTyping: true, + override: [ + throttleAsync( + 150, + async (ctx: CompletionContext): Promise => { + const {pos} = ctx; + + try { + const completions = + filePath && + (await client.call( + 'autocompleteAtPosition', + pos, + ensurePathStartsWithSlash(filePath) + )); + + if (!completions) { + DEBUG_EDITOR_RENDER('Unable to get completions', {pos}); + return null; + } + + return completeFromList( + completions.entries.map((c, i) => { + const details = c.details; + const description = details?.codeActions?.at(0)?.description; + const source = + details?.sourceDisplay?.map((token) => token.text).join('') || + c.sourceDisplayString; + const actions = details?.codeActions; + + const suggestions: Completion = { + type: c.kind, + label: c.name, + detail: source, + apply: actions + ? (view) => { + const codeActionChanges = actions.flatMap((action) => + tsFileTextChangesToCodemirrorChanges( + view.state, + action.changes, + filePath + ) + ); + + const apply = c.name; + + // TODO: currently we re-implement codemirror/autocomplete's default behavior + // because we couldn't have both a custom action and do the default. + // Upstream added a helper, but upgrading autocomplete requires a bump in many + // codemirror-related packages. + // See https://github.com/codemirror/autocomplete/blob/main/CHANGELOG.md#0202-2022-05-24 + const matchedPrefix = + ctx.matchBefore(/\w+/) ?? + DEBUG_EDITOR_RENDER.tap('fallback', { + from: Math.min( + ctx.pos, + view.state.selection.main.from + ), + to: view.state.selection.main.to, + }); + const baseLabelChange = { + from: matchedPrefix.from, + to: view.state.selection.main.to, + insert: apply, + }; + + view.dispatch({ + // ...insertLabelChanges, + changes: [ + // insertLabelChanges.changes, + baseLabelChange, + ...codeActionChanges, + ], + annotations: pickedCompletion.of(suggestions), + }); + } + : undefined, + info: + details && + function () { + const container = document.createElement('div'); + renderIntoNode( + container, + + <> + {description && ( +
+ {description} +
+ )} + + + ); + return container; + }, + // TODO: double-check ranking makes sense. + boost: 1 / Number(c.sortText), + }; + + return suggestions; + }) + )(ctx); + } catch (e) { + DEBUG_EDITOR_RENDER('Unable to get completions', {pos, error: e}); + return null; + } + } + ), + ], + }); +} + function tsFileTextChangesToCodemirrorChanges( state: EditorState, changes: ts.FileTextChanges[], From 40964d46ef55f259f78b7e14aad4b1ccac229c63 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 05:57:37 -0700 Subject: [PATCH 13/70] extract hover tooltip extension --- .../codemirrorExtensions.tsx | 74 ++++++++++--------- 1 file changed, 40 insertions(+), 34 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 08804c2b084..17cdb88a0eb 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -40,40 +40,7 @@ export const codemirrorTypescriptExtensions = ( formatExtension(client, filePath), diagnosticExtension(client, filePath), autocompleteExtension(client, filePath), - - hoverTooltip( - async (_: EditorView, pos: number): Promise => { - const allInfo = filePath - ? await client.call( - 'infoAtPosition', - pos, - ensurePathStartsWithSlash(filePath) - ) - : undefined; - - if (!allInfo) { - return null; - } - - const quickInfo = allInfo.result; - - if (!quickInfo) return null; - - return { - pos, - create(view) { - const dom = document.createElement('div'); - dom.setAttribute('class', 'cm-diagnostic cm-diagnostic-info'); - renderIntoNode( - dom, - - ); - return {dom}; - }, - }; - }, - {hideOnChange: true} - ), + hoverTooltipExtension(client, filePath), ]; }; @@ -373,6 +340,45 @@ function autocompleteExtension( }); } +function hoverTooltipExtension( + client: ChannelClient, + filePath: string | undefined +) { + return hoverTooltip( + async (_: EditorView, pos: number): Promise => { + const allInfo = filePath + ? await client.call( + 'infoAtPosition', + pos, + ensurePathStartsWithSlash(filePath) + ) + : undefined; + + if (!allInfo) { + return null; + } + + const quickInfo = allInfo.result; + + if (!quickInfo) return null; + + return { + pos, + create(view) { + const dom = document.createElement('div'); + dom.setAttribute('class', 'cm-diagnostic cm-diagnostic-info'); + renderIntoNode( + dom, + + ); + return {dom}; + }, + }; + }, + {hideOnChange: true} + ); +} + function tsFileTextChangesToCodemirrorChanges( state: EditorState, changes: ts.FileTextChanges[], From a100175da7ce60a0d88f97d6455d6f372e92a2de Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 05:58:45 -0700 Subject: [PATCH 14/70] normalize function declaration type --- .../MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 17cdb88a0eb..1094dd17c42 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -26,10 +26,10 @@ import {ChannelClient} from './ChannelBridge'; import {DEBUG_EDITOR_RENDER} from './debug'; import type {TSServerWorker} from './tsserver.worker'; -export const codemirrorTypescriptExtensions = ( +export function codemirrorTypescriptExtensions( client: ChannelClient, filePath: string | undefined -) => { +) { DEBUG_EDITOR_RENDER( 'codemirrorTypescriptExtensions(filePath: "%s")', filePath @@ -42,7 +42,7 @@ export const codemirrorTypescriptExtensions = ( autocompleteExtension(client, filePath), hoverTooltipExtension(client, filePath), ]; -}; +} function requiredExtensions( client: ChannelClient, From 5a03a569dd66802035426a94d0ae43ef7e76cd19 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 06:38:47 -0700 Subject: [PATCH 15/70] improve tooltip size and word breaking --- .../codemirrorExtensions.tsx | 57 +++++++++++++------ 1 file changed, 39 insertions(+), 18 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 1094dd17c42..0a5a2405583 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -15,7 +15,7 @@ import { openLintPanel, } from '@codemirror/lint'; import {EditorState} from '@codemirror/state'; -import {hoverTooltip, Tooltip} from '@codemirror/tooltip'; +import {hoverTooltip, Tooltip, tooltips} from '@codemirror/tooltip'; import {Command, EditorView, keymap, ViewUpdate} from '@codemirror/view'; import {SandpackFiles} from '@codesandbox/sandpack-react'; import {ReactElement, ReactNode} from 'react'; @@ -64,10 +64,21 @@ function requiredExtensions( } }), + tooltips({ + // position: absolute allows us to use percent width. + position: 'absolute', + }), + EditorView.baseTheme({ + '.cm-tooltip': { + // fighting .sp-code-editor .cm-tooltip, which sets max-width: 200px. + maxWidth: 'min(60ch, 80%) !important', + }, '.quickinfo-monospace': { fontFamily: `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, fontSize: '87%', + // Some tupe + overflowWrap: 'break-word', }, '.quickinfo-truncate': { display: '-webkit-box', @@ -438,28 +449,35 @@ const TS_SYMBOL_TAG_TO_CODEMIRROR_TAG: Record< linkText: hl.tags.link, }; -const BRACKET_TYPE = { - '(': hl.tags.paren, - ')': hl.tags.paren, - '[': hl.tags.squareBracket, - ']': hl.tags.squareBracket, - '}': hl.tags.brace, - '{': hl.tags.brace, - '<': hl.tags.angleBracket, - '>': hl.tags.angleBracket, -}; +const BRACKETS = { + '(': {tag: hl.tags.paren, type: 'open'}, + ')': {tag: hl.tags.paren, type: 'close'}, + '[': {tag: hl.tags.squareBracket, type: 'open'}, + ']': {tag: hl.tags.squareBracket, type: 'close'}, + '{': {tag: hl.tags.brace, type: 'open'}, + '}': {tag: hl.tags.brace, type: 'close'}, + '<': {tag: hl.tags.angleBracket, type: 'open'}, + '>': {tag: hl.tags.angleBracket, type: 'close'}, +} as const; + +const ZERO_WIDTH_SPACE = '​'; function highlightSymbolDisplayPart(sym: SymbolDisplayPart) { if (sym.kind in TS_SYMBOL_TAG_TO_CODEMIRROR_TAG) { const kind = sym.kind as keyof typeof TS_SYMBOL_TAG_TO_CODEMIRROR_TAG; - if (kind === 'punctuation' && sym.text in BRACKET_TYPE) { - return BRACKET_TYPE[sym.text as keyof typeof BRACKET_TYPE]; + if (kind === 'punctuation' && sym.text in BRACKETS) { + return BRACKETS[sym.text as keyof typeof BRACKETS]; } - return TS_SYMBOL_TAG_TO_CODEMIRROR_TAG[ - sym.kind as keyof typeof TS_SYMBOL_TAG_TO_CODEMIRROR_TAG - ]; + const tag = + TS_SYMBOL_TAG_TO_CODEMIRROR_TAG[ + sym.kind as keyof typeof TS_SYMBOL_TAG_TO_CODEMIRROR_TAG + ]; + + if (tag) { + return {tag, type: 'other'} as const; + } } console.warn(`Unknown symbol kind: ${sym.kind} (in "${sym.text}")`); @@ -485,10 +503,13 @@ function SymbolDisplayParts(props: { }) { const {state, parts} = props; const items = parts.map((sym, i) => { - const tag = highlightSymbolDisplayPart(sym); + const symbolInfo = highlightSymbolDisplayPart(sym); return ( - + + {/* Add zero width spaces before/after braces to assist in wrapping long symbols. */} + {symbolInfo?.type === 'close' ? ZERO_WIDTH_SPACE : ''} {sym.text} + {symbolInfo?.type === 'open' ? ZERO_WIDTH_SPACE : ''} ); }); From fe197b45661adfc5052db0c8ad3cd69afe7d8e1d Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 07:12:38 -0700 Subject: [PATCH 16/70] note about renderToStaticMarkup use --- .../MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx | 3 +++ .../MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 0a5a2405583..67800720520 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -562,6 +562,9 @@ function QuickInfo(props: { } function renderIntoNode(node: Element, reactNode: ReactElement) { + // Use renderToStaticMarkup + innerHTML because Codemirror doesn't give us a + // hook to unmount a React root when the tooltip closes. I'm not sure if that + // would leak memory. const html = renderToStaticMarkup(reactNode); node.innerHTML = html; } diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts index 9f17c57333b..3285ec0b21b 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts @@ -1,4 +1,4 @@ -import {VirtualTypeScriptEnvironment} from '@typescript/vfs'; +import type {VirtualTypeScriptEnvironment} from '@typescript/vfs'; import type {CompilerOptions} from 'typescript'; import {DEBUG_EDITOR_WORKER} from './debug'; import {ChannelServer} from './ChannelBridge'; From 3af308e9bb5544c33c2e1505809c9d18b097a370 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 07:34:34 -0700 Subject: [PATCH 17/70] Consistent return to fix build --- .../MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts index 3285ec0b21b..21e697db5b5 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts @@ -273,12 +273,7 @@ class TSServerWorker { compilerOpts ); - try { - return this.lintSystem(entry); - } catch (error) { - // Not ready? - console.error('todo', error); - } + return this.lintSystem(entry); }; lintSystem = (filePath: string) => { From 0ecf88c3f032d704fadd1d649b32b2115ce2a02f Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 07:35:05 -0700 Subject: [PATCH 18/70] disable eslint unused warning for type-heavy file --- .../MDX/Sandpack/sandpack-tsserver/ChannelBridge.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/ChannelBridge.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/ChannelBridge.ts index 65cb75cd052..f46e46de5ce 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/ChannelBridge.ts +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/ChannelBridge.ts @@ -1,3 +1,7 @@ +// eslint considers named arguments in interfaces and overloads unused. +// Disabling to avoid noise in this type-heavy file. +/* eslint-disable no-unused-vars */ + /** Used for type-level retrieval */ const ResponseTypeSymbol = Symbol('Response Type'); From 0563226fb9d24d7522cfc55afe153dcc76d34a2e Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 07:39:58 -0700 Subject: [PATCH 19/70] Fix autocomplete buggy dismissal behavior --- beta/src/components/MDX/Sandpack/CustomPreset.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index 4d228b812c3..5bef5447e1e 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -73,7 +73,13 @@ export function CustomPreset({ )}> Date: Thu, 2 Jun 2022 08:08:25 -0700 Subject: [PATCH 20/70] use normal imports instead of importScript --- .../components/MDX/Sandpack/CustomPreset.tsx | 2 - .../sandpack-tsserver/tsserver.worker.ts | 48 +++++++------------ 2 files changed, 16 insertions(+), 34 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index 5bef5447e1e..73f8cc0d870 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -139,8 +139,6 @@ const MemoCodeEditor = React.memo( } prevExtensions.current = extensions; - console.log('MemoCodeEditor', keyRef.current, extensions); - return ( void; -importScripts('https://unpkg.com/@typescript/vfs@1.3.5/dist/vfs.globals.js'); -importScripts( - 'https://cdnjs.cloudflare.com/ajax/libs/typescript/4.4.3/typescript.min.js' -); +import ts from 'typescript'; +import { + createDefaultMapFromCDN, + createSystem, + createVirtualTypeScriptEnvironment, +} from '@typescript/vfs'; +import type {Diagnostic} from '@codemirror/lint'; -type TS = typeof import('typescript'); -export type VFS = typeof import('@typescript/vfs'); -export type Diagnostic = import('@codemirror/lint').Diagnostic; +const BUCKET_URL = 'https://prod-packager-packages.codesandbox.io/v1/typings'; +const TYPES_REGISTRY = 'https://unpkg.com/types-registry@latest/index.json'; +const wrappedPostMessage = DEBUG_EDITOR_WORKER.wrap('tx', postMessage); interface SerializedAction { name: string; - data: TS.CodeFixAction; + data: ts.CodeFixAction; } export interface SerializedDiagnostic extends Diagnostic { serializedActions: SerializedAction[]; } -const getGlobalImport = (key: string): Type => (globalThis as any)[key]; -const { - createDefaultMapFromCDN, - createSystem, - createVirtualTypeScriptEnvironment, -} = getGlobalImport('tsvfs'); -const ts = getGlobalImport('ts'); - -// TODO: can we remove this? -// globalThis.localStorage = globalThis.localStorage ?? ({} as Storage); - -const BUCKET_URL = 'https://prod-packager-packages.codesandbox.io/v1/typings'; -const TYPES_REGISTRY = 'https://unpkg.com/types-registry@latest/index.json'; - -const wrappedPostMessage = DEBUG_EDITOR_WORKER.wrap('tx', postMessage); - /** * Fetch dependencies types from CodeSandbox CDN */ @@ -93,7 +77,7 @@ const getCompileOptions = DEBUG_EDITOR_WORKER.wrap( esModuleInterop: true, allowJs: true, checkJs: true, - jsx: TS.JsxEmit.ReactJSXDev, + jsx: ts.JsxEmit.ReactJSXDev, }; if (tsconfigFile.compilerOptions) { @@ -429,7 +413,7 @@ class TSServerWorker { } }; - applyCodeAction(action: TS.CodeActionCommand) { + applyCodeAction(action: ts.CodeActionCommand) { const env = this.env; if (!env) { return; @@ -446,13 +430,13 @@ class TSServerWorker { } } -const FormatCodeSettings: TS.FormatCodeSettings = { - semicolons: TS.SemicolonPreference.Insert, +const FormatCodeSettings: ts.FormatCodeSettings = { + semicolons: ts.SemicolonPreference.Insert, trimTrailingWhitespace: true, indentSize: 2, tabSize: 2, convertTabsToSpaces: true, - indentStyle: TS.IndentStyle.Smart, + indentStyle: ts.IndentStyle.Smart, insertSpaceAfterCommaDelimiter: true, insertSpaceAfterKeywordsInControlFlowStatements: true, insertSpaceAfterSemicolonInForStatements: true, From 3cc6e674c402862889ebc658b8ed04736b2e79f2 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 08:52:43 -0700 Subject: [PATCH 21/70] switch back to position: fixed tooltips (default) --- .../sandpack-tsserver/codemirrorExtensions.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 67800720520..a64e47cced4 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -64,15 +64,16 @@ function requiredExtensions( } }), - tooltips({ - // position: absolute allows us to use percent width. - position: 'absolute', - }), + // position: absolute allows us to use percent-based max-width, but the tooltip + // renders *under* the iframe. + // tooltips({ + // position: 'absolute', + // }), EditorView.baseTheme({ '.cm-tooltip': { // fighting .sp-code-editor .cm-tooltip, which sets max-width: 200px. - maxWidth: 'min(60ch, 80%) !important', + maxWidth: 'min(60ch, 80%, 70vw) !important', }, '.quickinfo-monospace': { fontFamily: `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, From 7025bd46a8bbc037670aff2b2b7e5203bc2106b4 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 09:25:26 -0700 Subject: [PATCH 22/70] improve toolip style, esp in dark mode. add rounded borders --- .../codemirrorExtensions.tsx | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index a64e47cced4..1dd02a2bd29 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -72,13 +72,28 @@ function requiredExtensions( EditorView.baseTheme({ '.cm-tooltip': { - // fighting .sp-code-editor .cm-tooltip, which sets max-width: 200px. - maxWidth: 'min(60ch, 80%, 70vw) !important', + // fighting .sp-code-editor .cm-tooltip here: + maxWidth: 'min(60ch, 70vw) !important', // set to 200px by Sandpack + border: '1px solid var(--sp-colors-fg-inactive) !important', // set to light colors always + padding: '2px', + borderRadius: '4px', + background: 'var(--sp-colors-bg-default)', + }, + '.cm-tooltip-autocomplete ul li[aria-selected]': { + borderRadius: '2px', + }, + '.cm-tooltip.cm-completionInfo': { + margin: '0px 2px', + maxWidth: '400px !important', // sins of !important :( }, '.quickinfo-monospace': { - fontFamily: `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, - fontSize: '87%', - // Some tupe + // Respect dark color theme better + color: 'var(--theme-plain)', + // TODO: is there a better way to get the mono font stack? + fontFamily: + '"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', + // fontSize: '87%', + // Some types are very long! overflowWrap: 'break-word', }, '.quickinfo-truncate': { @@ -529,10 +544,9 @@ function QuickInfo(props: { <> {displayParts && (
-
)} From 920e67723dd724ca85a8a69e875ff33c1548440e Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 10:11:32 -0700 Subject: [PATCH 23/70] fix diagnostic color in dark mode --- .../codemirrorExtensions.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 1dd02a2bd29..bdd308ebef9 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -78,6 +78,10 @@ function requiredExtensions( padding: '2px', borderRadius: '4px', background: 'var(--sp-colors-bg-default)', + color: 'var(--theme-plain)', + }, + '.cm-tooltip-section:not(:first-child)': { + borderColor: 'var(--sp-colors-fg-inactive)', }, '.cm-tooltip-autocomplete ul li[aria-selected]': { borderRadius: '2px', @@ -87,14 +91,12 @@ function requiredExtensions( maxWidth: '400px !important', // sins of !important :( }, '.quickinfo-monospace': { - // Respect dark color theme better - color: 'var(--theme-plain)', // TODO: is there a better way to get the mono font stack? fontFamily: '"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', - // fontSize: '87%', // Some types are very long! overflowWrap: 'break-word', + whiteSpace: 'pre-wrap', }, '.quickinfo-truncate': { display: '-webkit-box', @@ -105,6 +107,9 @@ function requiredExtensions( '.quickinfo-small': { fontSize: '90%', }, + '.cm-diagnostic': { + color: 'var(--theme-plain) !important', + }, '.cm-diagnostic .quickinfo-documentation:first-child': { paddingTop: 0, }, @@ -113,10 +118,6 @@ function requiredExtensions( paddingTop: '3px', }, '.quickinfo-documentation': { - marginLeft: '-8px', - paddingLeft: '8px', - marginRight: '-6px', - paddingRight: '6px', paddingTop: '6px', marginTop: '6px', }, @@ -393,7 +394,7 @@ function hoverTooltipExtension( pos, create(view) { const dom = document.createElement('div'); - dom.setAttribute('class', 'cm-diagnostic cm-diagnostic-info'); + // dom.setAttribute('class', 'cm-diagnostic cm-diagnostic-info'); renderIntoNode( dom, @@ -494,6 +495,8 @@ function highlightSymbolDisplayPart(sym: SymbolDisplayPart) { if (tag) { return {tag, type: 'other'} as const; } + + return undefined; } console.warn(`Unknown symbol kind: ${sym.kind} (in "${sym.text}")`); From cc54950835506ff5ec841b5a94cff5655e9f6ea6 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 10:31:46 -0700 Subject: [PATCH 24/70] lazy-load the extension itself --- .../codemirrorExtensions.tsx | 25 ++---------------- .../ensurePathBeginsWithSlash.ts | 22 ++++++++++++++++ .../useTypescriptExtension.tsx | 26 ++++++++++++++----- 3 files changed, 44 insertions(+), 29 deletions(-) create mode 100644 beta/src/components/MDX/Sandpack/sandpack-tsserver/ensurePathBeginsWithSlash.ts diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index bdd308ebef9..0469c576e8b 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -15,15 +15,15 @@ import { openLintPanel, } from '@codemirror/lint'; import {EditorState} from '@codemirror/state'; -import {hoverTooltip, Tooltip, tooltips} from '@codemirror/tooltip'; +import {hoverTooltip, Tooltip} from '@codemirror/tooltip'; import {Command, EditorView, keymap, ViewUpdate} from '@codemirror/view'; -import {SandpackFiles} from '@codesandbox/sandpack-react'; import {ReactElement, ReactNode} from 'react'; import {renderToStaticMarkup} from 'react-dom/server'; import type ts from 'typescript'; import {SymbolDisplayPart, SymbolDisplayPartKind} from 'typescript'; import {ChannelClient} from './ChannelBridge'; import {DEBUG_EDITOR_RENDER} from './debug'; +import {ensurePathStartsWithSlash} from './ensurePathBeginsWithSlash'; import type {TSServerWorker} from './tsserver.worker'; export function codemirrorTypescriptExtensions( @@ -642,24 +642,3 @@ function throttleAsync( return result.promise; }; } - -export function ensurePathStartsWithSlash(path: string): string; -export function ensurePathStartsWithSlash(path: undefined): undefined; -export function ensurePathStartsWithSlash(path: string | undefined) { - if (path === undefined) { - return path; - } - if (path[0] === '/') { - return path; - } - return `/${path}`; -} - -export function ensureAllPathsStartWithSlash(fs: SandpackFiles): SandpackFiles { - return Object.fromEntries( - Object.entries(fs).map(([key, value]) => [ - ensurePathStartsWithSlash(key), - value, - ]) - ); -} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/ensurePathBeginsWithSlash.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/ensurePathBeginsWithSlash.ts new file mode 100644 index 00000000000..b40d493b3f2 --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/ensurePathBeginsWithSlash.ts @@ -0,0 +1,22 @@ +import type {SandpackFiles} from '@codesandbox/sandpack-react'; + +export function ensurePathStartsWithSlash(path: string): string; +export function ensurePathStartsWithSlash(path: undefined): undefined; +export function ensurePathStartsWithSlash(path: string | undefined) { + if (path === undefined) { + return path; + } + if (path[0] === '/') { + return path; + } + return `/${path}`; +} + +export function ensureAllPathsStartWithSlash(fs: SandpackFiles): SandpackFiles { + return Object.fromEntries( + Object.entries(fs).map(([key, value]) => [ + ensurePathStartsWithSlash(key), + value, + ]) + ); +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx index f1431387bfd..182f542ca3c 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx @@ -1,12 +1,11 @@ import {useSandpack} from '@codesandbox/sandpack-react'; import {useEffect, useMemo, useState} from 'react'; import {ChannelClient, ChannelServer} from './ChannelBridge'; +import {DEBUG_EDITOR_RENDER} from './debug'; import { - codemirrorTypescriptExtensions, ensureAllPathsStartWithSlash, ensurePathStartsWithSlash, -} from './codemirrorExtensions'; -import {DEBUG_EDITOR_RENDER} from './debug'; +} from './ensurePathBeginsWithSlash'; import {getLocalStorage} from './localStorageHelper'; import type {TSServerWorker} from './tsserver.worker'; @@ -40,6 +39,18 @@ export const useTypescriptExtension = () => { }; }); + const [codemirrorExtensions, setCodemirrorExtensions] = + useState(); + + useEffect(() => { + const loadExtensions = async () => { + const codemirrorExtensions = await import('./codemirrorExtensions'); + setCodemirrorExtensions(codemirrorExtensions); + }; + + loadExtensions(); + }, []); + const {sandpack} = useSandpack(); // Subscribe to responses from the worker. @@ -91,12 +102,15 @@ export const useTypescriptExtension = () => { const activePath = sandpack.activePath; const extensions = useMemo(() => { - if (!tsServerWorker) { + if (!tsServerWorker || !codemirrorExtensions) { return []; } - return codemirrorTypescriptExtensions(tsServerWorker.client, activePath); - }, [tsServerWorker, activePath]); + return codemirrorExtensions.codemirrorTypescriptExtensions( + tsServerWorker.client, + activePath + ); + }, [codemirrorExtensions, tsServerWorker, activePath]); return extensions; }; From 8f729c0c5944224ad1986988493868b56400b070 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 10:49:53 -0700 Subject: [PATCH 25/70] remove debug logging --- beta/package.json | 2 - .../codemirrorExtensions.tsx | 28 +++++------- .../MDX/Sandpack/sandpack-tsserver/debug.ts | 40 ----------------- .../sandpack-tsserver/tsserver.worker.ts | 45 +++++++++---------- .../useTypescriptExtension.tsx | 7 +-- 5 files changed, 31 insertions(+), 91 deletions(-) delete mode 100644 beta/src/components/MDX/Sandpack/sandpack-tsserver/debug.ts diff --git a/beta/package.json b/beta/package.json index f96da74a18f..f9b687c27a8 100644 --- a/beta/package.json +++ b/beta/package.json @@ -31,7 +31,6 @@ "classnames": "^2.2.6", "date-fns": "^2.16.1", "debounce": "^1.2.1", - "debug": "^4.3.4", "ga-lite": "^2.1.4", "github-slugger": "^1.3.0", "next": "12.1.7-canary.11", @@ -45,7 +44,6 @@ "@mdx-js/loader": "^1.6.16", "@types/body-scroll-lock": "^2.6.1", "@types/classnames": "^2.2.10", - "@types/debug": "^4.1.7", "@types/github-slugger": "^1.3.0", "@types/mdx-js__react": "^1.5.2", "@types/node": "^14.6.4", diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx index 0469c576e8b..f878945dbab 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -20,9 +20,8 @@ import {Command, EditorView, keymap, ViewUpdate} from '@codemirror/view'; import {ReactElement, ReactNode} from 'react'; import {renderToStaticMarkup} from 'react-dom/server'; import type ts from 'typescript'; -import {SymbolDisplayPart, SymbolDisplayPartKind} from 'typescript'; +import type {SymbolDisplayPart, SymbolDisplayPartKind} from 'typescript'; import {ChannelClient} from './ChannelBridge'; -import {DEBUG_EDITOR_RENDER} from './debug'; import {ensurePathStartsWithSlash} from './ensurePathBeginsWithSlash'; import type {TSServerWorker} from './tsserver.worker'; @@ -30,11 +29,6 @@ export function codemirrorTypescriptExtensions( client: ChannelClient, filePath: string | undefined ) { - DEBUG_EDITOR_RENDER( - 'codemirrorTypescriptExtensions(filePath: "%s")', - filePath - ); - return [ requiredExtensions(client, filePath), formatExtension(client, filePath), @@ -269,7 +263,7 @@ function autocompleteExtension( )); if (!completions) { - DEBUG_EDITOR_RENDER('Unable to get completions', {pos}); + console.warn('Unable to get completions', {pos}); return null; } @@ -303,15 +297,13 @@ function autocompleteExtension( // Upstream added a helper, but upgrading autocomplete requires a bump in many // codemirror-related packages. // See https://github.com/codemirror/autocomplete/blob/main/CHANGELOG.md#0202-2022-05-24 - const matchedPrefix = - ctx.matchBefore(/\w+/) ?? - DEBUG_EDITOR_RENDER.tap('fallback', { - from: Math.min( - ctx.pos, - view.state.selection.main.from - ), - to: view.state.selection.main.to, - }); + const matchedPrefix = ctx.matchBefore(/\w+/) ?? { + from: Math.min( + ctx.pos, + view.state.selection.main.from + ), + to: view.state.selection.main.to, + }; const baseLabelChange = { from: matchedPrefix.from, to: view.state.selection.main.to, @@ -359,7 +351,7 @@ function autocompleteExtension( }) )(ctx); } catch (e) { - DEBUG_EDITOR_RENDER('Unable to get completions', {pos, error: e}); + console.error('Unable to get completions', {pos, error: e}); return null; } } diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/debug.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/debug.ts deleted file mode 100644 index 985eac6fcc6..00000000000 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/debug.ts +++ /dev/null @@ -1,40 +0,0 @@ -import debug, {Debugger} from 'debug'; - -export const DEBUG_ROOT = mixin(debug('jake.tl')); - -const DEBUG_EDITOR = mixin(DEBUG_ROOT.extend('editor')); -export const DEBUG_EDITOR_WORKER = mixin(DEBUG_EDITOR.extend('worker')); -export const DEBUG_EDITOR_RENDER = mixin(DEBUG_EDITOR.extend('render')); - -debug.enable(`${DEBUG_ROOT.namespace}:*`); - -export function helpers(dbg: Debugger) { - return { - tap: (fmt: string, val: T): T => tap(dbg, fmt, val), - - wrap: (fmt: string, f: (...args: In) => Out) => - wrap(dbg, fmt, f), - }; -} - -export function wrap( - dbg: Debugger, - fmt: string, - fn: (...args: In) => Out -): (...args: In) => Out { - return (...args) => { - const res = fn(...args); - dbg(fmt || fn.name, ...args, '->', res); - return res; - }; -} - -export function tap(dbg: Debugger, fmt: string, val: T): T { - dbg(fmt, val); - return val; -} - -export function mixin(dbg: Debugger): Debugger & ReturnType { - Object.assign(dbg, helpers(dbg)); - return dbg as any; -} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts index 2fd5c4cae46..2ef6899c32e 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/tsserver.worker.ts @@ -1,6 +1,5 @@ import type {VirtualTypeScriptEnvironment} from '@typescript/vfs'; import type {CompilerOptions} from 'typescript'; -import {DEBUG_EDITOR_WORKER} from './debug'; import {ChannelServer} from './ChannelBridge'; import ts from 'typescript'; import { @@ -12,7 +11,7 @@ import type {Diagnostic} from '@codemirror/lint'; const BUCKET_URL = 'https://prod-packager-packages.codesandbox.io/v1/typings'; const TYPES_REGISTRY = 'https://unpkg.com/types-registry@latest/index.json'; -const wrappedPostMessage = DEBUG_EDITOR_WORKER.wrap('tx', postMessage); +const wrappedPostMessage = (msg: any) => postMessage(msg); interface SerializedAction { name: string; @@ -36,8 +35,6 @@ const fetchTypesFromCodeSandboxBucket = async ({ try { const url = `${BUCKET_URL}/${name}/${version}.json`; const {files} = await fetch(url).then((data) => data.json()); - DEBUG_EDITOR_WORKER('fetched types', name, version, files); - return files; } catch (error) { console.warn(`Failed to fetch types: ${name}@${version}`, error); @@ -67,28 +64,27 @@ const getDefinitelyTypedPackageMapping = async () => { /** * Process the TS compile options or default to */ -const getCompileOptions = DEBUG_EDITOR_WORKER.wrap( - 'getCompilerOptions', - (tsconfigFile: Record): CompilerOptions => { - const defaultValue: CompilerOptions = { - target: ts.ScriptTarget.ES2021, - module: ts.ModuleKind.ES2020, - lib: ['es2021', 'es2020', 'dom', 'webworker'], - esModuleInterop: true, - allowJs: true, - checkJs: true, - jsx: ts.JsxEmit.ReactJSXDev, - }; - - if (tsconfigFile.compilerOptions) { - const blankSystem = createSystem(new Map()); - return ts.parseJsonConfigFileContent(tsconfigFile, blankSystem, '/') - .options; - } +const getCompileOptions = ( + tsconfigFile: Record +): CompilerOptions => { + const defaultValue: CompilerOptions = { + target: ts.ScriptTarget.ES2021, + module: ts.ModuleKind.ES2020, + lib: ['es2021', 'es2020', 'dom', 'webworker'], + esModuleInterop: true, + allowJs: true, + checkJs: true, + jsx: ts.JsxEmit.ReactJSXDev, + }; - return defaultValue; + if (tsconfigFile.compilerOptions) { + const blankSystem = createSystem(new Map()); + return ts.parseJsonConfigFileContent(tsconfigFile, blankSystem, '/') + .options; } -); + + return defaultValue; +}; const processTypescriptCacheFromStorage = ( fsMapCached: Map @@ -136,7 +132,6 @@ class TSServerWorker { for (const filePath in files) { const content = files[filePath].code; allFiles.set(filePath, content); - DEBUG_EDITOR_WORKER('file', filePath, content); if (filePath[0] !== '/') { throw new Error(`Paths must be absolute: ${filePath}`); } diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx index 182f542ca3c..2ba64e82bdc 100644 --- a/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/useTypescriptExtension.tsx @@ -1,7 +1,6 @@ import {useSandpack} from '@codesandbox/sandpack-react'; import {useEffect, useMemo, useState} from 'react'; import {ChannelClient, ChannelServer} from './ChannelBridge'; -import {DEBUG_EDITOR_RENDER} from './debug'; import { ensureAllPathsStartWithSlash, ensurePathStartsWithSlash, @@ -22,12 +21,8 @@ export const useTypescriptExtension = () => { } ); - const postMessage = DEBUG_EDITOR_RENDER.wrap('tx', (msg) => - worker.postMessage(msg) - ); - + const postMessage = (msg: any) => worker.postMessage(msg); const renderer = new TSServerRender(getLocalStorage()); - return { worker, renderer, From 47dc6e67a677f77ca893c9eafc7a5ec447806b56 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 11:00:07 -0700 Subject: [PATCH 26/70] remove debug from lockfile --- beta/yarn.lock | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/beta/yarn.lock b/beta/yarn.lock index 0f187fcc489..8dcd43d147b 100644 --- a/beta/yarn.lock +++ b/beta/yarn.lock @@ -846,13 +846,6 @@ dependencies: classnames "*" -"@types/debug@^4.1.7": - version "4.1.7" - resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82" - integrity sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg== - dependencies: - "@types/ms" "*" - "@types/eslint-visitor-keys@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d" @@ -894,11 +887,6 @@ dependencies: "@types/react" "*" -"@types/ms@*": - version "0.7.31" - resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197" - integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA== - "@types/node@^14.6.4": version "14.18.9" resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.9.tgz#0e5944eefe2b287391279a19b407aa98bd14436d" @@ -1728,13 +1716,6 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.3: dependencies: ms "2.1.2" -debug@^4.3.4: - version "4.3.4" - resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" - integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== - dependencies: - ms "2.1.2" - deep-is@^0.1.3: version "0.1.4" resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" From 2eb88506a450ef6bf7f28cbfe13ea835181f76e9 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Thu, 2 Jun 2022 11:34:59 -0700 Subject: [PATCH 27/70] pre-package react type files --- .../sandpack-tsserver/react-type-cache.json | 107 +++++++++++++++ .../sandpack-tsserver/tsserver.worker.ts | 128 +++++++++++------- 2 files changed, 186 insertions(+), 49 deletions(-) create mode 100644 beta/src/components/MDX/Sandpack/sandpack-tsserver/react-type-cache.json diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/react-type-cache.json b/beta/src/components/MDX/Sandpack/sandpack-tsserver/react-type-cache.json new file mode 100644 index 00000000000..c142e9da73b --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/react-type-cache.json @@ -0,0 +1,107 @@ +{ + "/node_modules/@types/prop-types/index.d.ts": { + "module": { + "code": "// Type definitions for prop-types 15.7\n// Project: https://github.com/reactjs/prop-types, https://facebook.github.io/react\n// Definitions by: DovydasNavickas \n// Ferdy Budhidharma \n// Sebastian Silbermann \n// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped\n// TypeScript Version: 2.8\n\nexport type ReactComponentLike =\n | string\n | ((props: any, context?: any) => any)\n | (new (props: any, context?: any) => any);\n\nexport interface ReactElementLike {\n type: ReactComponentLike;\n props: any;\n key: string | number | null;\n}\n\nexport interface ReactNodeArray extends Iterable {}\n\nexport type ReactNodeLike =\n | ReactElementLike\n | ReactNodeArray\n | string\n | number\n | boolean\n | null\n | undefined;\n\nexport const nominalTypeHack: unique symbol;\n\nexport type IsOptional = undefined extends T ? true : false;\n\nexport type RequiredKeys = { [K in keyof V]-?: Exclude extends Validator ? IsOptional extends true ? never : K : never }[keyof V];\nexport type OptionalKeys = Exclude>;\nexport type InferPropsInner = { [K in keyof V]-?: InferType; };\n\nexport interface Validator {\n (props: { [key: string]: any }, propName: string, componentName: string, location: string, propFullName: string): Error | null;\n [nominalTypeHack]?: {\n type: T;\n } | undefined;\n}\n\nexport interface Requireable extends Validator {\n isRequired: Validator>;\n}\n\nexport type ValidationMap = { [K in keyof T]?: Validator };\n\nexport type InferType = V extends Validator ? T : any;\nexport type InferProps =\n & InferPropsInner>>\n & Partial>>>;\n\nexport const any: Requireable;\nexport const array: Requireable;\nexport const bool: Requireable;\nexport const func: Requireable<(...args: any[]) => any>;\nexport const number: Requireable;\nexport const object: Requireable;\nexport const string: Requireable;\nexport const node: Requireable;\nexport const element: Requireable;\nexport const symbol: Requireable;\nexport const elementType: Requireable;\nexport function instanceOf(expectedClass: new (...args: any[]) => T): Requireable;\nexport function oneOf(types: ReadonlyArray): Requireable;\nexport function oneOfType>(types: T[]): Requireable>>;\nexport function arrayOf(type: Validator): Requireable;\nexport function objectOf(type: Validator): Requireable<{ [K in keyof any]: T; }>;\nexport function shape

>(type: P): Requireable>;\nexport function exact

>(type: P): Requireable>>;\n\n/**\n * Assert that the values match with the type specs.\n * Error messages are memorized and will only be shown once.\n *\n * @param typeSpecs Map of name to a ReactPropType\n * @param values Runtime values that need to be type-checked\n * @param location e.g. \"prop\", \"context\", \"child context\"\n * @param componentName Name of the component for error messages\n * @param getStack Returns the component stack\n */\nexport function checkPropTypes(typeSpecs: any, values: any, location: string, componentName: string, getStack?: () => any): void;\n\n/**\n * Only available if NODE_ENV=production\n */\nexport function resetWarningCache(): void;\n" + } + }, + "/node_modules/@types/prop-types/package.json": { + "module": { + "code": "{\n \"name\": \"@types/prop-types\",\n \"version\": \"15.7.5\",\n \"description\": \"TypeScript definitions for prop-types\",\n \"homepage\": \"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/prop-types\",\n \"license\": \"MIT\",\n \"contributors\": [\n {\n \"name\": \"DovydasNavickas\",\n \"url\": \"https://github.com/DovydasNavickas\",\n \"githubUsername\": \"DovydasNavickas\"\n },\n {\n \"name\": \"Ferdy Budhidharma\",\n \"url\": \"https://github.com/ferdaber\",\n \"githubUsername\": \"ferdaber\"\n },\n {\n \"name\": \"Sebastian Silbermann\",\n \"url\": \"https://github.com/eps1lon\",\n \"githubUsername\": \"eps1lon\"\n }\n ],\n \"main\": \"\",\n \"types\": \"index.d.ts\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/DefinitelyTyped/DefinitelyTyped.git\",\n \"directory\": \"types/prop-types\"\n },\n \"scripts\": {},\n \"dependencies\": {},\n \"typesPublisherContentHash\": \"771faec3cc5b1aa1cefc03c5dd3668980da8a0c59785867e473d6d7baea31a8a\",\n \"typeScriptVersion\": \"3.9\"\n}" + } + }, + "/node_modules/@types/react/experimental.d.ts": { + "module": { + "code": "/**\n * These are types for things that are present in the `experimental` builds of React but not yet\n * on a stable build.\n *\n * Once they are promoted to stable they can just be moved to the main index file.\n *\n * To load the types declared here in an actual project, there are three ways. The easiest one,\n * if your `tsconfig.json` already has a `\"types\"` array in the `\"compilerOptions\"` section,\n * is to add `\"react/experimental\"` to the `\"types\"` array.\n *\n * Alternatively, a specific import syntax can to be used from a typescript file.\n * This module does not exist in reality, which is why the {} is important:\n *\n * ```ts\n * import {} from 'react/experimental'\n * ```\n *\n * It is also possible to include it through a triple-slash reference:\n *\n * ```ts\n * /// \n * ```\n *\n * Either the import or the reference only needs to appear once, anywhere in the project.\n */\n\n// See https://github.com/facebook/react/blob/master/packages/react/src/React.js to see how the exports are declared,\n// and https://github.com/facebook/react/blob/master/packages/shared/ReactFeatureFlags.js to verify which APIs are\n// flagged experimental or not. Experimental APIs will be tagged with `__EXPERIMENTAL__`.\n//\n// For the inputs of types exported as simply a fiber tag, the `beginWork` function of ReactFiberBeginWork.js\n// is a good place to start looking for details; it generally calls prop validation functions or delegates\n// all tasks done as part of the render phase (the concurrent part of the React update cycle).\n//\n// Suspense-related handling can be found in ReactFiberThrow.js.\n\nimport React = require('./next');\n\nexport {};\n\ndeclare module '.' {\n export interface SuspenseProps {\n /**\n * The presence of this prop indicates that the content is computationally expensive to render.\n * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data).\n * @see {@link https://github.com/facebook/react/pull/19936}\n */\n unstable_expectedLoadTime?: number | undefined;\n }\n\n export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together';\n export type SuspenseListTailMode = 'collapsed' | 'hidden';\n\n export interface SuspenseListCommonProps {\n /**\n * Note that SuspenseList require more than one child;\n * it is a runtime warning to provide only a single child.\n *\n * It does, however, allow those children to be wrapped inside a single\n * level of ``.\n */\n children: ReactElement | Iterable;\n }\n\n interface DirectionalSuspenseListProps extends SuspenseListCommonProps {\n /**\n * Defines the order in which the `SuspenseList` children should be revealed.\n */\n revealOrder: 'forwards' | 'backwards';\n /**\n * Dictates how unloaded items in a SuspenseList is shown.\n *\n * - By default, `SuspenseList` will show all fallbacks in the list.\n * - `collapsed` shows only the next fallback in the list.\n * - `hidden` doesn’t show any unloaded items.\n */\n tail?: SuspenseListTailMode | undefined;\n }\n\n interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {\n /**\n * Defines the order in which the `SuspenseList` children should be revealed.\n */\n revealOrder?: Exclude | undefined;\n /**\n * The tail property is invalid when not using the `forwards` or `backwards` reveal orders.\n */\n tail?: never | undefined;\n }\n\n export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;\n\n /**\n * `SuspenseList` helps coordinate many components that can suspend by orchestrating the order\n * in which these components are revealed to the user.\n *\n * When multiple components need to fetch data, this data may arrive in an unpredictable order.\n * However, if you wrap these items in a `SuspenseList`, React will not show an item in the list\n * until previous items have been displayed (this behavior is adjustable).\n *\n * @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist\n * @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist\n */\n export const SuspenseList: ExoticComponent;\n}\n" + } + }, + "/node_modules/@types/react/global.d.ts": { + "module": { + "code": "/*\nReact projects that don't include the DOM library need these interfaces to compile.\nReact Native applications use React, but there is no DOM available. The JavaScript runtime\nis ES6/ES2015 only. These definitions allow such projects to compile with only `--lib ES6`.\n\nWarning: all of these interfaces are empty. If you want type definitions for various properties\n(such as HTMLInputElement.prototype.value), you need to add `--lib DOM` (via command line or tsconfig.json).\n*/\n\ninterface Event { }\ninterface AnimationEvent extends Event { }\ninterface ClipboardEvent extends Event { }\ninterface CompositionEvent extends Event { }\ninterface DragEvent extends Event { }\ninterface FocusEvent extends Event { }\ninterface KeyboardEvent extends Event { }\ninterface MouseEvent extends Event { }\ninterface TouchEvent extends Event { }\ninterface PointerEvent extends Event { }\ninterface TransitionEvent extends Event { }\ninterface UIEvent extends Event { }\ninterface WheelEvent extends Event { }\n\ninterface EventTarget { }\ninterface Document { }\ninterface DataTransfer { }\ninterface StyleMedia { }\n\ninterface Element { }\ninterface DocumentFragment { }\n\ninterface HTMLElement extends Element { }\ninterface HTMLAnchorElement extends HTMLElement { }\ninterface HTMLAreaElement extends HTMLElement { }\ninterface HTMLAudioElement extends HTMLElement { }\ninterface HTMLBaseElement extends HTMLElement { }\ninterface HTMLBodyElement extends HTMLElement { }\ninterface HTMLBRElement extends HTMLElement { }\ninterface HTMLButtonElement extends HTMLElement { }\ninterface HTMLCanvasElement extends HTMLElement { }\ninterface HTMLDataElement extends HTMLElement { }\ninterface HTMLDataListElement extends HTMLElement { }\ninterface HTMLDetailsElement extends HTMLElement { }\ninterface HTMLDialogElement extends HTMLElement { }\ninterface HTMLDivElement extends HTMLElement { }\ninterface HTMLDListElement extends HTMLElement { }\ninterface HTMLEmbedElement extends HTMLElement { }\ninterface HTMLFieldSetElement extends HTMLElement { }\ninterface HTMLFormElement extends HTMLElement { }\ninterface HTMLHeadingElement extends HTMLElement { }\ninterface HTMLHeadElement extends HTMLElement { }\ninterface HTMLHRElement extends HTMLElement { }\ninterface HTMLHtmlElement extends HTMLElement { }\ninterface HTMLIFrameElement extends HTMLElement { }\ninterface HTMLImageElement extends HTMLElement { }\ninterface HTMLInputElement extends HTMLElement { }\ninterface HTMLModElement extends HTMLElement { }\ninterface HTMLLabelElement extends HTMLElement { }\ninterface HTMLLegendElement extends HTMLElement { }\ninterface HTMLLIElement extends HTMLElement { }\ninterface HTMLLinkElement extends HTMLElement { }\ninterface HTMLMapElement extends HTMLElement { }\ninterface HTMLMetaElement extends HTMLElement { }\ninterface HTMLMeterElement extends HTMLElement { }\ninterface HTMLObjectElement extends HTMLElement { }\ninterface HTMLOListElement extends HTMLElement { }\ninterface HTMLOptGroupElement extends HTMLElement { }\ninterface HTMLOptionElement extends HTMLElement { }\ninterface HTMLOutputElement extends HTMLElement { }\ninterface HTMLParagraphElement extends HTMLElement { }\ninterface HTMLParamElement extends HTMLElement { }\ninterface HTMLPreElement extends HTMLElement { }\ninterface HTMLProgressElement extends HTMLElement { }\ninterface HTMLQuoteElement extends HTMLElement { }\ninterface HTMLSlotElement extends HTMLElement { }\ninterface HTMLScriptElement extends HTMLElement { }\ninterface HTMLSelectElement extends HTMLElement { }\ninterface HTMLSourceElement extends HTMLElement { }\ninterface HTMLSpanElement extends HTMLElement { }\ninterface HTMLStyleElement extends HTMLElement { }\ninterface HTMLTableElement extends HTMLElement { }\ninterface HTMLTableColElement extends HTMLElement { }\ninterface HTMLTableDataCellElement extends HTMLElement { }\ninterface HTMLTableHeaderCellElement extends HTMLElement { }\ninterface HTMLTableRowElement extends HTMLElement { }\ninterface HTMLTableSectionElement extends HTMLElement { }\ninterface HTMLTemplateElement extends HTMLElement { }\ninterface HTMLTextAreaElement extends HTMLElement { }\ninterface HTMLTimeElement extends HTMLElement { }\ninterface HTMLTitleElement extends HTMLElement { }\ninterface HTMLTrackElement extends HTMLElement { }\ninterface HTMLUListElement extends HTMLElement { }\ninterface HTMLVideoElement extends HTMLElement { }\ninterface HTMLWebViewElement extends HTMLElement { }\n\ninterface SVGElement extends Element { }\ninterface SVGSVGElement extends SVGElement { }\ninterface SVGCircleElement extends SVGElement { }\ninterface SVGClipPathElement extends SVGElement { }\ninterface SVGDefsElement extends SVGElement { }\ninterface SVGDescElement extends SVGElement { }\ninterface SVGEllipseElement extends SVGElement { }\ninterface SVGFEBlendElement extends SVGElement { }\ninterface SVGFEColorMatrixElement extends SVGElement { }\ninterface SVGFEComponentTransferElement extends SVGElement { }\ninterface SVGFECompositeElement extends SVGElement { }\ninterface SVGFEConvolveMatrixElement extends SVGElement { }\ninterface SVGFEDiffuseLightingElement extends SVGElement { }\ninterface SVGFEDisplacementMapElement extends SVGElement { }\ninterface SVGFEDistantLightElement extends SVGElement { }\ninterface SVGFEDropShadowElement extends SVGElement { }\ninterface SVGFEFloodElement extends SVGElement { }\ninterface SVGFEFuncAElement extends SVGElement { }\ninterface SVGFEFuncBElement extends SVGElement { }\ninterface SVGFEFuncGElement extends SVGElement { }\ninterface SVGFEFuncRElement extends SVGElement { }\ninterface SVGFEGaussianBlurElement extends SVGElement { }\ninterface SVGFEImageElement extends SVGElement { }\ninterface SVGFEMergeElement extends SVGElement { }\ninterface SVGFEMergeNodeElement extends SVGElement { }\ninterface SVGFEMorphologyElement extends SVGElement { }\ninterface SVGFEOffsetElement extends SVGElement { }\ninterface SVGFEPointLightElement extends SVGElement { }\ninterface SVGFESpecularLightingElement extends SVGElement { }\ninterface SVGFESpotLightElement extends SVGElement { }\ninterface SVGFETileElement extends SVGElement { }\ninterface SVGFETurbulenceElement extends SVGElement { }\ninterface SVGFilterElement extends SVGElement { }\ninterface SVGForeignObjectElement extends SVGElement { }\ninterface SVGGElement extends SVGElement { }\ninterface SVGImageElement extends SVGElement { }\ninterface SVGLineElement extends SVGElement { }\ninterface SVGLinearGradientElement extends SVGElement { }\ninterface SVGMarkerElement extends SVGElement { }\ninterface SVGMaskElement extends SVGElement { }\ninterface SVGMetadataElement extends SVGElement { }\ninterface SVGPathElement extends SVGElement { }\ninterface SVGPatternElement extends SVGElement { }\ninterface SVGPolygonElement extends SVGElement { }\ninterface SVGPolylineElement extends SVGElement { }\ninterface SVGRadialGradientElement extends SVGElement { }\ninterface SVGRectElement extends SVGElement { }\ninterface SVGStopElement extends SVGElement { }\ninterface SVGSwitchElement extends SVGElement { }\ninterface SVGSymbolElement extends SVGElement { }\ninterface SVGTextElement extends SVGElement { }\ninterface SVGTextPathElement extends SVGElement { }\ninterface SVGTSpanElement extends SVGElement { }\ninterface SVGUseElement extends SVGElement { }\ninterface SVGViewElement extends SVGElement { }\n\ninterface Text { }\ninterface TouchList { }\ninterface WebGLRenderingContext { }\ninterface WebGL2RenderingContext { }\n" + } + }, + "/node_modules/@types/react/index.d.ts": { + "module": { + "code": "// Type definitions for React 18.0\n// Project: http://facebook.github.io/react/\n// Definitions by: Asana \n// AssureSign \n// Microsoft \n// John Reilly \n// Benoit Benezech \n// Patricio Zavolinsky \n// Eric Anderson \n// Dovydas Navickas \n// Josh Rutherford \n// Guilherme Hübner \n// Ferdy Budhidharma \n// Johann Rakotoharisoa \n// Olivier Pascal \n// Martin Hochel \n// Frank Li \n// Jessica Franco \n// Saransh Kataria \n// Kanitkorn Sujautra \n// Sebastian Silbermann \n// Kyle Scully \n// Cong Zhang \n// Dimitri Mitropoulos \n// JongChan Choi \n// Victor Magalhães \n// Dale Tan \n// Priyanshu Rav \n// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped\n// TypeScript Version: 2.8\n\n// NOTE: Users of the `experimental` builds of React should add a reference\n// to 'react/experimental' in their project. See experimental.d.ts's top comment\n// for reference and documentation on how exactly to do it.\n\n/// \n\nimport * as CSS from 'csstype';\nimport * as PropTypes from 'prop-types';\nimport { Interaction as SchedulerInteraction } from 'scheduler/tracing';\n\ntype NativeAnimationEvent = AnimationEvent;\ntype NativeClipboardEvent = ClipboardEvent;\ntype NativeCompositionEvent = CompositionEvent;\ntype NativeDragEvent = DragEvent;\ntype NativeFocusEvent = FocusEvent;\ntype NativeKeyboardEvent = KeyboardEvent;\ntype NativeMouseEvent = MouseEvent;\ntype NativeTouchEvent = TouchEvent;\ntype NativePointerEvent = PointerEvent;\ntype NativeTransitionEvent = TransitionEvent;\ntype NativeUIEvent = UIEvent;\ntype NativeWheelEvent = WheelEvent;\ntype Booleanish = boolean | 'true' | 'false';\n\ndeclare const UNDEFINED_VOID_ONLY: unique symbol;\n// Destructors are only allowed to return void.\ntype Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };\ntype VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };\n\n// tslint:disable-next-line:export-just-namespace\nexport = React;\nexport as namespace React;\n\ndeclare namespace React {\n //\n // React Elements\n // ----------------------------------------------------------------------\n\n type ElementType

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

;\n type ComponentType

= ComponentClass

| FunctionComponent

;\n\n type JSXElementConstructor

=\n | ((props: P) => ReactElement | null)\n | (new (props: P) => Component);\n\n interface RefObject {\n readonly current: T | null;\n }\n // Bivariance hack for consistent unsoundness with RefObject\n type RefCallback = { bivarianceHack(instance: T | null): void }[\"bivarianceHack\"];\n type Ref = RefCallback | RefObject | null;\n type LegacyRef = string | Ref;\n /**\n * Gets the instance type for a React element. The instance will be different for various component types:\n *\n * - React class components will be the class instance. So if you had `class Foo extends React.Component<{}> {}`\n * and used `React.ElementRef` then the type would be the instance of `Foo`.\n * - React stateless functional components do not have a backing instance and so `React.ElementRef`\n * (when `Bar` is `function Bar() {}`) will give you the `undefined` type.\n * - JSX intrinsics like `div` will give you their DOM instance. For `React.ElementRef<'div'>` that would be\n * `HTMLDivElement`. For `React.ElementRef<'input'>` that would be `HTMLInputElement`.\n * - React stateless functional components that forward a `ref` will give you the `ElementRef` of the forwarded\n * to component.\n *\n * `C` must be the type _of_ a React component so you need to use typeof as in React.ElementRef.\n *\n * @todo In Flow, this works a little different with forwarded refs and the `AbstractComponent` that\n * `React.forwardRef()` returns.\n */\n type ElementRef<\n C extends\n | ForwardRefExoticComponent\n | { new (props: any): Component }\n | ((props: any, context?: any) => ReactElement | null)\n | keyof JSX.IntrinsicElements\n > =\n // need to check first if `ref` is a valid prop for ts@3.0\n // otherwise it will infer `{}` instead of `never`\n \"ref\" extends keyof ComponentPropsWithRef\n ? NonNullable[\"ref\"]> extends Ref<\n infer Instance\n >\n ? Instance\n : never\n : never;\n\n type ComponentState = any;\n\n type Key = string | number;\n\n /**\n * @internal You shouldn't need to use this type since you never see these attributes\n * inside your component or have to validate them.\n */\n interface Attributes {\n key?: Key | null | undefined;\n }\n interface RefAttributes extends Attributes {\n ref?: Ref | undefined;\n }\n interface ClassAttributes extends Attributes {\n ref?: LegacyRef | undefined;\n }\n\n interface ReactElement

= string | JSXElementConstructor> {\n type: T;\n props: P;\n key: Key | null;\n }\n\n interface ReactComponentElement<\n T extends keyof JSX.IntrinsicElements | JSXElementConstructor,\n P = Pick, Exclude, 'key' | 'ref'>>\n > extends ReactElement> { }\n\n interface FunctionComponentElement

extends ReactElement> {\n ref?: ('ref' extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined;\n }\n\n type CElement> = ComponentElement;\n interface ComponentElement> extends ReactElement> {\n ref?: LegacyRef | undefined;\n }\n\n type ClassicElement

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

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

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

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

;\n\n /**\n * @deprecated Please use `FunctionComponentFactory`\n */\n type SFCFactory

= FunctionComponentFactory

;\n\n type FunctionComponentFactory

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

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

= CFactory>;\n\n type DOMFactory

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

, T extends HTMLElement> extends DOMFactory {\n (props?: ClassAttributes & P | null, ...children: ReactNode[]): DetailedReactHTMLElement;\n }\n\n interface SVGFactory extends DOMFactory, SVGElement> {\n (props?: ClassAttributes & SVGAttributes | null, ...children: ReactNode[]): ReactSVGElement;\n }\n\n /**\n * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.\n */\n type ReactText = string | number;\n /**\n * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.\n */\n type ReactChild = ReactElement | string | number;\n\n /**\n * @deprecated Use either `ReactNode[]` if you need an array or `Iterable` if its passed to a host component.\n */\n interface ReactNodeArray extends ReadonlyArray {}\n type ReactFragment = Iterable;\n type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;\n\n //\n // Top Level API\n // ----------------------------------------------------------------------\n\n // DOM Elements\n function createFactory(\n type: keyof ReactHTML): HTMLFactory;\n function createFactory(\n type: keyof ReactSVG): SVGFactory;\n function createFactory

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

(type: FunctionComponent

): FunctionComponentFactory

;\n function createFactory

(\n type: ClassType, ClassicComponentClass

>): CFactory>;\n function createFactory, C extends ComponentClass

>(\n type: ClassType): CFactory;\n function createFactory

(type: ComponentClass

): Factory

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

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

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

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

(\n type: FunctionComponent

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

;\n function createElement

(\n type: ClassType, ClassicComponentClass

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

, C extends ComponentClass

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

(\n type: FunctionComponent

| ComponentClass

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

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

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

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

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

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

(\n element: FunctionComponentElement

,\n props?: Partial

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

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

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

(\n element: ReactElement

,\n props?: Partial

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

;\n\n // Context via RenderProps\n interface ProviderProps {\n value: T;\n children?: ReactNode | undefined;\n }\n\n interface ConsumerProps {\n children: (value: T) => ReactNode;\n }\n\n // TODO: similar to how Fragment is actually a symbol, the values returned from createContext,\n // forwardRef and memo are actually objects that are treated specially by the renderer; see:\n // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/ReactContext.js#L35-L48\n // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/forwardRef.js#L42-L45\n // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/memo.js#L27-L31\n // However, we have no way of telling the JSX parser that it's a JSX element type or its props other than\n // by pretending to be a normal component.\n //\n // We don't just use ComponentType or FunctionComponent types because you are not supposed to attach statics to this\n // object, but rather to the original function.\n interface ExoticComponent

{\n /**\n * **NOTE**: Exotic components are not callable.\n */\n (props: P): (ReactElement|null);\n readonly $$typeof: symbol;\n }\n\n interface NamedExoticComponent

extends ExoticComponent

{\n displayName?: string | undefined;\n }\n\n interface ProviderExoticComponent

extends ExoticComponent

{\n propTypes?: WeakValidationMap

| undefined;\n }\n\n type ContextType> = C extends Context ? T : never;\n\n // NOTE: only the Context object itself can get a displayName\n // https://github.com/facebook/react-devtools/blob/e0b854e4c/backend/attachRendererFiber.js#L310-L325\n type Provider = ProviderExoticComponent>;\n type Consumer = ExoticComponent>;\n interface Context {\n Provider: Provider;\n Consumer: Consumer;\n displayName?: string | undefined;\n }\n function createContext(\n // If you thought this should be optional, see\n // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106\n defaultValue: T,\n ): Context;\n\n function isValidElement

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

;\n\n // Sync with `ReactChildren` until `ReactChildren` is removed.\n const Children: {\n map(children: C | ReadonlyArray, fn: (child: C, index: number) => T):\n C extends null | undefined ? C : Array>;\n forEach(children: C | ReadonlyArray, fn: (child: C, index: number) => void): void;\n count(children: any): number;\n only(children: C): C extends any[] ? never : C;\n toArray(children: ReactNode | ReactNode[]): Array>;\n };\n const Fragment: ExoticComponent<{ children?: ReactNode | undefined }>;\n const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>;\n\n interface SuspenseProps {\n children?: ReactNode | undefined;\n\n /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */\n fallback?: ReactNode;\n }\n\n const Suspense: ExoticComponent;\n const version: string;\n\n /**\n * {@link https://reactjs.org/docs/profiler.html#onrender-callback Profiler API}\n */\n type ProfilerOnRenderCallback = (\n id: string,\n phase: \"mount\" | \"update\",\n actualDuration: number,\n baseDuration: number,\n startTime: number,\n commitTime: number,\n interactions: Set,\n ) => void;\n interface ProfilerProps {\n children?: ReactNode | undefined;\n id: string;\n onRender: ProfilerOnRenderCallback;\n }\n\n const Profiler: ExoticComponent;\n\n //\n // Component API\n // ----------------------------------------------------------------------\n\n type ReactInstance = Component | Element;\n\n // Base component for plain JS classes\n interface Component

extends ComponentLifecycle { }\n class Component {\n // tslint won't let me format the sample code in a way that vscode likes it :(\n /**\n * If set, `this.context` will be set at runtime to the current value of the given Context.\n *\n * Usage:\n *\n * ```ts\n * type MyContext = number\n * const Ctx = React.createContext(0)\n *\n * class Foo extends React.Component {\n * static contextType = Ctx\n * context!: React.ContextType\n * render () {\n * return <>My context's value: {this.context};\n * }\n * }\n * ```\n *\n * @see https://reactjs.org/docs/context.html#classcontexttype\n */\n static contextType?: Context | undefined;\n\n /**\n * If using the new style context, re-declare this in your class to be the\n * `React.ContextType` of your `static contextType`.\n * Should be used with type annotation or static contextType.\n *\n * ```ts\n * static contextType = MyContext\n * // For TS pre-3.7:\n * context!: React.ContextType\n * // For TS 3.7 and above:\n * declare context: React.ContextType\n * ```\n *\n * @see https://reactjs.org/docs/context.html\n */\n context: unknown;\n\n constructor(props: Readonly

| P);\n /**\n * @deprecated\n * @see https://reactjs.org/docs/legacy-context.html\n */\n constructor(props: P, context: any);\n\n // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.\n // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257\n // Also, the ` | S` allows intellisense to not be dumbisense\n setState(\n state: ((prevState: Readonly, props: Readonly

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

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

extends Component { }\n\n interface ClassicComponent

extends Component {\n replaceState(nextState: S, callback?: () => void): void;\n isMounted(): boolean;\n getInitialState?(): S;\n }\n\n interface ChildContextProvider {\n getChildContext(): CC;\n }\n\n //\n // Class Interfaces\n // ----------------------------------------------------------------------\n\n type FC

= FunctionComponent

;\n\n interface FunctionComponent

{\n (props: P, context?: any): ReactElement | null;\n propTypes?: WeakValidationMap

| undefined;\n contextTypes?: ValidationMap | undefined;\n defaultProps?: Partial

| undefined;\n displayName?: string | undefined;\n }\n\n /**\n * @deprecated - Equivalent with `React.FC`.\n */\n type VFC

= VoidFunctionComponent

;\n\n /**\n * @deprecated - Equivalent with `React.FunctionComponent`.\n */\n interface VoidFunctionComponent

{\n (props: P, context?: any): ReactElement | null;\n propTypes?: WeakValidationMap

| undefined;\n contextTypes?: ValidationMap | undefined;\n defaultProps?: Partial

| undefined;\n displayName?: string | undefined;\n }\n\n type ForwardedRef = ((instance: T | null) => void) | MutableRefObject | null;\n\n interface ForwardRefRenderFunction {\n (props: P, ref: ForwardedRef): ReactElement | null;\n displayName?: string | undefined;\n // explicit rejected with `never` required due to\n // https://github.com/microsoft/TypeScript/issues/36826\n /**\n * defaultProps are not supported on render functions\n */\n defaultProps?: never | undefined;\n /**\n * propTypes are not supported on render functions\n */\n propTypes?: never | undefined;\n }\n\n interface ComponentClass

extends StaticLifecycle {\n new (props: P, context?: any): Component;\n propTypes?: WeakValidationMap

| undefined;\n contextType?: Context | undefined;\n contextTypes?: ValidationMap | undefined;\n childContextTypes?: ValidationMap | undefined;\n defaultProps?: Partial

| undefined;\n displayName?: string | undefined;\n }\n\n interface ClassicComponentClass

extends ComponentClass

{\n new (props: P, context?: any): ClassicComponent;\n getDefaultProps?(): P;\n }\n\n /**\n * We use an intersection type to infer multiple type parameters from\n * a single argument, which is useful for many top-level API defs.\n * See https://github.com/Microsoft/TypeScript/issues/7234 for more info.\n */\n type ClassType, C extends ComponentClass

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

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

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

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

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

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

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

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

, nextState: Readonly, nextContext: any): void;\n }\n\n interface Mixin extends ComponentLifecycle {\n mixins?: Array> | undefined;\n statics?: {\n [key: string]: any;\n } | undefined;\n\n displayName?: string | undefined;\n propTypes?: ValidationMap | undefined;\n contextTypes?: ValidationMap | undefined;\n childContextTypes?: ValidationMap | undefined;\n\n getDefaultProps?(): P;\n getInitialState?(): S;\n }\n\n interface ComponentSpec extends Mixin {\n render(): ReactNode;\n\n [propertyName: string]: any;\n }\n\n function createRef(): RefObject;\n\n // will show `ForwardRef(${Component.displayName || Component.name})` in devtools by default,\n // but can be given its own specific name\n interface ForwardRefExoticComponent

extends NamedExoticComponent

{\n defaultProps?: Partial

| undefined;\n propTypes?: WeakValidationMap

| undefined;\n }\n\n function forwardRef(render: ForwardRefRenderFunction): ForwardRefExoticComponent & RefAttributes>;\n\n /** Ensures that the props do not include ref at all */\n type PropsWithoutRef

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

=\n // Just \"P extends { ref?: infer R }\" looks sufficient, but R will infer as {} if P is {}.\n 'ref' extends keyof P\n ? P extends { ref?: infer R | undefined }\n ? string extends R\n ? PropsWithoutRef

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

= P & { children?: ReactNode | undefined };\n\n /**\n * NOTE: prefer ComponentPropsWithRef, if the ref is forwarded,\n * or ComponentPropsWithoutRef when refs are not supported.\n */\n type ComponentProps> =\n T extends JSXElementConstructor\n ? P\n : T extends keyof JSX.IntrinsicElements\n ? JSX.IntrinsicElements[T]\n : {};\n type ComponentPropsWithRef =\n T extends (new (props: infer P) => Component)\n ? PropsWithoutRef

& RefAttributes>\n : PropsWithRef>;\n type ComponentPropsWithoutRef =\n PropsWithoutRef>;\n\n type ComponentRef = T extends NamedExoticComponent<\n ComponentPropsWithoutRef & RefAttributes\n >\n ? Method\n : ComponentPropsWithRef extends RefAttributes\n ? Method\n : never;\n\n // will show `Memo(${Component.displayName || Component.name})` in devtools by default,\n // but can be given its own specific name\n type MemoExoticComponent> = NamedExoticComponent> & {\n readonly type: T;\n };\n\n function memo

(\n Component: FunctionComponent

,\n propsAreEqual?: (prevProps: Readonly

, nextProps: Readonly

) => boolean\n ): NamedExoticComponent

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

extends true ? T :\n // If declared props have indexed properties, ignore inferred props entirely as keyof gets widened\n string extends keyof P ? P :\n // Prefer declared types which are not exactly any\n & Pick>\n // For props which are exactly any, use the type inferred from propTypes if present\n & Pick>>\n // Keep leftover props not specified in propTypes\n & Pick>\n : never;\n\ntype InexactPartial = { [K in keyof T]?: T[K] | undefined };\n\n// Any prop that has a default prop becomes optional, but its type is unchanged\n// Undeclared default props are augmented into the resulting allowable attributes\n// If declared props have indexed properties, ignore default props entirely as keyof gets widened\n// Wrap in an outer-level conditional type to allow distribution over props that are unions\ntype Defaultize = P extends any\n ? string extends keyof P ? P :\n & Pick>\n & InexactPartial>>\n & InexactPartial>>\n : never;\n\ntype ReactManagedAttributes = C extends { propTypes: infer T; defaultProps: infer D; }\n ? Defaultize>, D>\n : C extends { propTypes: infer T; }\n ? MergePropTypes>\n : C extends { defaultProps: infer D; }\n ? Defaultize\n : P;\n\ndeclare global {\n namespace JSX {\n interface Element extends React.ReactElement { }\n interface ElementClass extends React.Component {\n render(): React.ReactNode;\n }\n interface ElementAttributesProperty { props: {}; }\n interface ElementChildrenAttribute { children: {}; }\n\n // We can't recurse forever because `type` can't be self-referential;\n // let's assume it's reasonable to do a single React.lazy() around a single React.memo() / vice-versa\n type LibraryManagedAttributes = C extends React.MemoExoticComponent | React.LazyExoticComponent\n ? T extends React.MemoExoticComponent | React.LazyExoticComponent\n ? ReactManagedAttributes\n : ReactManagedAttributes\n : ReactManagedAttributes;\n\n interface IntrinsicAttributes extends React.Attributes { }\n interface IntrinsicClassAttributes extends React.ClassAttributes { }\n\n interface IntrinsicElements {\n // HTML\n a: React.DetailedHTMLProps, HTMLAnchorElement>;\n abbr: React.DetailedHTMLProps, HTMLElement>;\n address: React.DetailedHTMLProps, HTMLElement>;\n area: React.DetailedHTMLProps, HTMLAreaElement>;\n article: React.DetailedHTMLProps, HTMLElement>;\n aside: React.DetailedHTMLProps, HTMLElement>;\n audio: React.DetailedHTMLProps, HTMLAudioElement>;\n b: React.DetailedHTMLProps, HTMLElement>;\n base: React.DetailedHTMLProps, HTMLBaseElement>;\n bdi: React.DetailedHTMLProps, HTMLElement>;\n bdo: React.DetailedHTMLProps, HTMLElement>;\n big: React.DetailedHTMLProps, HTMLElement>;\n blockquote: React.DetailedHTMLProps, HTMLQuoteElement>;\n body: React.DetailedHTMLProps, HTMLBodyElement>;\n br: React.DetailedHTMLProps, HTMLBRElement>;\n button: React.DetailedHTMLProps, HTMLButtonElement>;\n canvas: React.DetailedHTMLProps, HTMLCanvasElement>;\n caption: React.DetailedHTMLProps, HTMLElement>;\n cite: React.DetailedHTMLProps, HTMLElement>;\n code: React.DetailedHTMLProps, HTMLElement>;\n col: React.DetailedHTMLProps, HTMLTableColElement>;\n colgroup: React.DetailedHTMLProps, HTMLTableColElement>;\n data: React.DetailedHTMLProps, HTMLDataElement>;\n datalist: React.DetailedHTMLProps, HTMLDataListElement>;\n dd: React.DetailedHTMLProps, HTMLElement>;\n del: React.DetailedHTMLProps, HTMLModElement>;\n details: React.DetailedHTMLProps, HTMLDetailsElement>;\n dfn: React.DetailedHTMLProps, HTMLElement>;\n dialog: React.DetailedHTMLProps, HTMLDialogElement>;\n div: React.DetailedHTMLProps, HTMLDivElement>;\n dl: React.DetailedHTMLProps, HTMLDListElement>;\n dt: React.DetailedHTMLProps, HTMLElement>;\n em: React.DetailedHTMLProps, HTMLElement>;\n embed: React.DetailedHTMLProps, HTMLEmbedElement>;\n fieldset: React.DetailedHTMLProps, HTMLFieldSetElement>;\n figcaption: React.DetailedHTMLProps, HTMLElement>;\n figure: React.DetailedHTMLProps, HTMLElement>;\n footer: React.DetailedHTMLProps, HTMLElement>;\n form: React.DetailedHTMLProps, HTMLFormElement>;\n h1: React.DetailedHTMLProps, HTMLHeadingElement>;\n h2: React.DetailedHTMLProps, HTMLHeadingElement>;\n h3: React.DetailedHTMLProps, HTMLHeadingElement>;\n h4: React.DetailedHTMLProps, HTMLHeadingElement>;\n h5: React.DetailedHTMLProps, HTMLHeadingElement>;\n h6: React.DetailedHTMLProps, HTMLHeadingElement>;\n head: React.DetailedHTMLProps, HTMLHeadElement>;\n header: React.DetailedHTMLProps, HTMLElement>;\n hgroup: React.DetailedHTMLProps, HTMLElement>;\n hr: React.DetailedHTMLProps, HTMLHRElement>;\n html: React.DetailedHTMLProps, HTMLHtmlElement>;\n i: React.DetailedHTMLProps, HTMLElement>;\n iframe: React.DetailedHTMLProps, HTMLIFrameElement>;\n img: React.DetailedHTMLProps, HTMLImageElement>;\n input: React.DetailedHTMLProps, HTMLInputElement>;\n ins: React.DetailedHTMLProps, HTMLModElement>;\n kbd: React.DetailedHTMLProps, HTMLElement>;\n keygen: React.DetailedHTMLProps, HTMLElement>;\n label: React.DetailedHTMLProps, HTMLLabelElement>;\n legend: React.DetailedHTMLProps, HTMLLegendElement>;\n li: React.DetailedHTMLProps, HTMLLIElement>;\n link: React.DetailedHTMLProps, HTMLLinkElement>;\n main: React.DetailedHTMLProps, HTMLElement>;\n map: React.DetailedHTMLProps, HTMLMapElement>;\n mark: React.DetailedHTMLProps, HTMLElement>;\n menu: React.DetailedHTMLProps, HTMLElement>;\n menuitem: React.DetailedHTMLProps, HTMLElement>;\n meta: React.DetailedHTMLProps, HTMLMetaElement>;\n meter: React.DetailedHTMLProps, HTMLMeterElement>;\n nav: React.DetailedHTMLProps, HTMLElement>;\n noindex: React.DetailedHTMLProps, HTMLElement>;\n noscript: React.DetailedHTMLProps, HTMLElement>;\n object: React.DetailedHTMLProps, HTMLObjectElement>;\n ol: React.DetailedHTMLProps, HTMLOListElement>;\n optgroup: React.DetailedHTMLProps, HTMLOptGroupElement>;\n option: React.DetailedHTMLProps, HTMLOptionElement>;\n output: React.DetailedHTMLProps, HTMLOutputElement>;\n p: React.DetailedHTMLProps, HTMLParagraphElement>;\n param: React.DetailedHTMLProps, HTMLParamElement>;\n picture: React.DetailedHTMLProps, HTMLElement>;\n pre: React.DetailedHTMLProps, HTMLPreElement>;\n progress: React.DetailedHTMLProps, HTMLProgressElement>;\n q: React.DetailedHTMLProps, HTMLQuoteElement>;\n rp: React.DetailedHTMLProps, HTMLElement>;\n rt: React.DetailedHTMLProps, HTMLElement>;\n ruby: React.DetailedHTMLProps, HTMLElement>;\n s: React.DetailedHTMLProps, HTMLElement>;\n samp: React.DetailedHTMLProps, HTMLElement>;\n slot: React.DetailedHTMLProps, HTMLSlotElement>;\n script: React.DetailedHTMLProps, HTMLScriptElement>;\n section: React.DetailedHTMLProps, HTMLElement>;\n select: React.DetailedHTMLProps, HTMLSelectElement>;\n small: React.DetailedHTMLProps, HTMLElement>;\n source: React.DetailedHTMLProps, HTMLSourceElement>;\n span: React.DetailedHTMLProps, HTMLSpanElement>;\n strong: React.DetailedHTMLProps, HTMLElement>;\n style: React.DetailedHTMLProps, HTMLStyleElement>;\n sub: React.DetailedHTMLProps, HTMLElement>;\n summary: React.DetailedHTMLProps, HTMLElement>;\n sup: React.DetailedHTMLProps, HTMLElement>;\n table: React.DetailedHTMLProps, HTMLTableElement>;\n template: React.DetailedHTMLProps, HTMLTemplateElement>;\n tbody: React.DetailedHTMLProps, HTMLTableSectionElement>;\n td: React.DetailedHTMLProps, HTMLTableDataCellElement>;\n textarea: React.DetailedHTMLProps, HTMLTextAreaElement>;\n tfoot: React.DetailedHTMLProps, HTMLTableSectionElement>;\n th: React.DetailedHTMLProps, HTMLTableHeaderCellElement>;\n thead: React.DetailedHTMLProps, HTMLTableSectionElement>;\n time: React.DetailedHTMLProps, HTMLTimeElement>;\n title: React.DetailedHTMLProps, HTMLTitleElement>;\n tr: React.DetailedHTMLProps, HTMLTableRowElement>;\n track: React.DetailedHTMLProps, HTMLTrackElement>;\n u: React.DetailedHTMLProps, HTMLElement>;\n ul: React.DetailedHTMLProps, HTMLUListElement>;\n \"var\": React.DetailedHTMLProps, HTMLElement>;\n video: React.DetailedHTMLProps, HTMLVideoElement>;\n wbr: React.DetailedHTMLProps, HTMLElement>;\n webview: React.DetailedHTMLProps, HTMLWebViewElement>;\n\n // SVG\n svg: React.SVGProps;\n\n animate: React.SVGProps; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now.\n animateMotion: React.SVGProps;\n animateTransform: React.SVGProps; // TODO: It is SVGAnimateTransformElement but is not in TypeScript's lib.dom.d.ts for now.\n circle: React.SVGProps;\n clipPath: React.SVGProps;\n defs: React.SVGProps;\n desc: React.SVGProps;\n ellipse: React.SVGProps;\n feBlend: React.SVGProps;\n feColorMatrix: React.SVGProps;\n feComponentTransfer: React.SVGProps;\n feComposite: React.SVGProps;\n feConvolveMatrix: React.SVGProps;\n feDiffuseLighting: React.SVGProps;\n feDisplacementMap: React.SVGProps;\n feDistantLight: React.SVGProps;\n feDropShadow: React.SVGProps;\n feFlood: React.SVGProps;\n feFuncA: React.SVGProps;\n feFuncB: React.SVGProps;\n feFuncG: React.SVGProps;\n feFuncR: React.SVGProps;\n feGaussianBlur: React.SVGProps;\n feImage: React.SVGProps;\n feMerge: React.SVGProps;\n feMergeNode: React.SVGProps;\n feMorphology: React.SVGProps;\n feOffset: React.SVGProps;\n fePointLight: React.SVGProps;\n feSpecularLighting: React.SVGProps;\n feSpotLight: React.SVGProps;\n feTile: React.SVGProps;\n feTurbulence: React.SVGProps;\n filter: React.SVGProps;\n foreignObject: React.SVGProps;\n g: React.SVGProps;\n image: React.SVGProps;\n line: React.SVGProps;\n linearGradient: React.SVGProps;\n marker: React.SVGProps;\n mask: React.SVGProps;\n metadata: React.SVGProps;\n mpath: React.SVGProps;\n path: React.SVGProps;\n pattern: React.SVGProps;\n polygon: React.SVGProps;\n polyline: React.SVGProps;\n radialGradient: React.SVGProps;\n rect: React.SVGProps;\n stop: React.SVGProps;\n switch: React.SVGProps;\n symbol: React.SVGProps;\n text: React.SVGProps;\n textPath: React.SVGProps;\n tspan: React.SVGProps;\n use: React.SVGProps;\n view: React.SVGProps;\n }\n }\n}\n" + } + }, + "/node_modules/@types/react/jsx-dev-runtime.d.ts": { + "module": { + "code": "// Expose `JSX` namespace in `global` namespace\nimport './';\n" + } + }, + "/node_modules/@types/react/jsx-runtime.d.ts": { + "module": { + "code": "// Expose `JSX` namespace in `global` namespace\nimport './';\n" + } + }, + "/node_modules/@types/react/next.d.ts": { + "module": { + "code": "/**\n * These are types for things that are present in the React `next` release channel.\n *\n * To load the types declared here in an actual project, there are three ways. The easiest one,\n * if your `tsconfig.json` already has a `\"types\"` array in the `\"compilerOptions\"` section,\n * is to add `\"react/next\"` to the `\"types\"` array.\n *\n * Alternatively, a specific import syntax can to be used from a typescript file.\n * This module does not exist in reality, which is why the {} is important:\n *\n * ```ts\n * import {} from 'react/next'\n * ```\n *\n * It is also possible to include it through a triple-slash reference:\n *\n * ```ts\n * /// \n * ```\n *\n * Either the import or the reference only needs to appear once, anywhere in the project.\n */\n\n// See https://github.com/facebook/react/blob/main/packages/react/src/React.js to see how the exports are declared,\n\nimport React = require('.');\n\nexport {};\n\ndeclare module '.' {}\n" + } + }, + "/node_modules/@types/react/package.json": { + "module": { + "code": "{\n \"name\": \"@types/react\",\n \"version\": \"18.0.9\",\n \"description\": \"TypeScript definitions for React\",\n \"homepage\": \"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react\",\n \"license\": \"MIT\",\n \"contributors\": [\n {\n \"name\": \"Asana\",\n \"url\": \"https://asana.com\"\n },\n {\n \"name\": \"AssureSign\",\n \"url\": \"http://www.assuresign.com\"\n },\n {\n \"name\": \"Microsoft\",\n \"url\": \"https://microsoft.com\"\n },\n {\n \"name\": \"John Reilly\",\n \"url\": \"https://github.com/johnnyreilly\",\n \"githubUsername\": \"johnnyreilly\"\n },\n {\n \"name\": \"Benoit Benezech\",\n \"url\": \"https://github.com/bbenezech\",\n \"githubUsername\": \"bbenezech\"\n },\n {\n \"name\": \"Patricio Zavolinsky\",\n \"url\": \"https://github.com/pzavolinsky\",\n \"githubUsername\": \"pzavolinsky\"\n },\n {\n \"name\": \"Eric Anderson\",\n \"url\": \"https://github.com/ericanderson\",\n \"githubUsername\": \"ericanderson\"\n },\n {\n \"name\": \"Dovydas Navickas\",\n \"url\": \"https://github.com/DovydasNavickas\",\n \"githubUsername\": \"DovydasNavickas\"\n },\n {\n \"name\": \"Josh Rutherford\",\n \"url\": \"https://github.com/theruther4d\",\n \"githubUsername\": \"theruther4d\"\n },\n {\n \"name\": \"Guilherme Hübner\",\n \"url\": \"https://github.com/guilhermehubner\",\n \"githubUsername\": \"guilhermehubner\"\n },\n {\n \"name\": \"Ferdy Budhidharma\",\n \"url\": \"https://github.com/ferdaber\",\n \"githubUsername\": \"ferdaber\"\n },\n {\n \"name\": \"Johann Rakotoharisoa\",\n \"url\": \"https://github.com/jrakotoharisoa\",\n \"githubUsername\": \"jrakotoharisoa\"\n },\n {\n \"name\": \"Olivier Pascal\",\n \"url\": \"https://github.com/pascaloliv\",\n \"githubUsername\": \"pascaloliv\"\n },\n {\n \"name\": \"Martin Hochel\",\n \"url\": \"https://github.com/hotell\",\n \"githubUsername\": \"hotell\"\n },\n {\n \"name\": \"Frank Li\",\n \"url\": \"https://github.com/franklixuefei\",\n \"githubUsername\": \"franklixuefei\"\n },\n {\n \"name\": \"Jessica Franco\",\n \"url\": \"https://github.com/Jessidhia\",\n \"githubUsername\": \"Jessidhia\"\n },\n {\n \"name\": \"Saransh Kataria\",\n \"url\": \"https://github.com/saranshkataria\",\n \"githubUsername\": \"saranshkataria\"\n },\n {\n \"name\": \"Kanitkorn Sujautra\",\n \"url\": \"https://github.com/lukyth\",\n \"githubUsername\": \"lukyth\"\n },\n {\n \"name\": \"Sebastian Silbermann\",\n \"url\": \"https://github.com/eps1lon\",\n \"githubUsername\": \"eps1lon\"\n },\n {\n \"name\": \"Kyle Scully\",\n \"url\": \"https://github.com/zieka\",\n \"githubUsername\": \"zieka\"\n },\n {\n \"name\": \"Cong Zhang\",\n \"url\": \"https://github.com/dancerphil\",\n \"githubUsername\": \"dancerphil\"\n },\n {\n \"name\": \"Dimitri Mitropoulos\",\n \"url\": \"https://github.com/dimitropoulos\",\n \"githubUsername\": \"dimitropoulos\"\n },\n {\n \"name\": \"JongChan Choi\",\n \"url\": \"https://github.com/disjukr\",\n \"githubUsername\": \"disjukr\"\n },\n {\n \"name\": \"Victor Magalhães\",\n \"url\": \"https://github.com/vhfmag\",\n \"githubUsername\": \"vhfmag\"\n },\n {\n \"name\": \"Dale Tan\",\n \"url\": \"https://github.com/hellatan\",\n \"githubUsername\": \"hellatan\"\n },\n {\n \"name\": \"Priyanshu Rav\",\n \"url\": \"https://github.com/priyanshurav\",\n \"githubUsername\": \"priyanshurav\"\n }\n ],\n \"main\": \"\",\n \"types\": \"index.d.ts\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/DefinitelyTyped/DefinitelyTyped.git\",\n \"directory\": \"types/react\"\n },\n \"scripts\": {},\n \"dependencies\": {\n \"@types/prop-types\": \"*\",\n \"@types/scheduler\": \"*\",\n \"csstype\": \"^3.0.2\"\n },\n \"typesPublisherContentHash\": \"5a1553fa1391041fef92ca64fd86edbc8291f251eb9ca9b57bc425f8f41c13fc\",\n \"typeScriptVersion\": \"3.9\",\n \"exports\": {\n \".\": {\n \"types\": {\n \"default\": \"./index.d.ts\"\n }\n },\n \"./next\": {\n \"types\": {\n \"default\": \"./next.d.ts\"\n }\n },\n \"./experimental\": {\n \"types\": {\n \"default\": \"./experimental.d.ts\"\n }\n },\n \"./jsx-runtime\": {\n \"types\": {\n \"default\": \"./jsx-runtime.d.ts\"\n }\n },\n \"./jsx-dev-runtime\": {\n \"types\": {\n \"default\": \"./jsx-dev-runtime.d.ts\"\n }\n },\n \"./package.json\": \"./package.json\"\n }\n}" + } + }, + "/node_modules/@types/scheduler/index.d.ts": { + "module": { + "code": "// Type definitions for scheduler 0.16\n// Project: https://reactjs.org/\n// Definitions by: Nathan Bierema \n// Sebastian Silbermann \n// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped\n// TypeScript Version: 2.8\n\nexport type FrameCallbackType = () => FrameCallbackType | void;\nexport interface CallbackNode {\n callback: FrameCallbackType;\n priorityLevel: number;\n expirationTime: number;\n next: CallbackNode | null;\n prev: CallbackNode | null;\n}\n\nexport const unstable_ImmediatePriority = 1;\nexport const unstable_UserBlockingPriority = 2;\nexport const unstable_NormalPriority = 3;\nexport const unstable_IdlePriority = 5;\nexport const unstable_LowPriority = 4;\nexport function unstable_runWithPriority(priorityLevel: number, eventHandler: () => T): T;\nexport function unstable_scheduleCallback(priorityLevel: number, callback: FrameCallbackType, options?: { delay?: number | undefined, timeout?: number | undefined}): CallbackNode;\nexport function unstable_next(eventHandler: () => T): T;\nexport function unstable_cancelCallback(callbackNode: CallbackNode): void;\nexport function unstable_wrapCallback(callback: FrameCallbackType): () => FrameCallbackType;\nexport function unstable_getCurrentPriorityLevel(): number;\nexport function unstable_shouldYield(): boolean;\nexport function unstable_continueExecution(): void;\nexport function unstable_pauseExecution(): void;\nexport function unstable_getFirstCallbackNode(): CallbackNode | null;\nexport function unstable_now(): number;\n" + } + }, + "/node_modules/@types/scheduler/package.json": { + "module": { + "code": "{\n \"name\": \"@types/scheduler\",\n \"version\": \"0.16.2\",\n \"description\": \"TypeScript definitions for scheduler\",\n \"homepage\": \"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/scheduler\",\n \"license\": \"MIT\",\n \"contributors\": [\n {\n \"name\": \"Nathan Bierema\",\n \"url\": \"https://github.com/Methuselah96\",\n \"githubUsername\": \"Methuselah96\"\n },\n {\n \"name\": \"Sebastian Silbermann\",\n \"url\": \"https://github.com/eps1lon\",\n \"githubUsername\": \"eps1lon\"\n }\n ],\n \"main\": \"\",\n \"types\": \"index.d.ts\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/DefinitelyTyped/DefinitelyTyped.git\",\n \"directory\": \"types/scheduler\"\n },\n \"scripts\": {},\n \"dependencies\": {},\n \"typesPublisherContentHash\": \"122d740959245799b89613cc799b1a2e3274d1ee1db6c9abd7b6e4dadc0696ec\",\n \"typeScriptVersion\": \"3.6\"\n}" + } + }, + "/node_modules/@types/scheduler/tracing.d.ts": { + "module": { + "code": "// disable automatic export\nexport {};\n/**\n * This type is only interesting if you're only using this module for a specifc build environment.\n *\n * With module augmentation you can declare what build of scheduler you are using by\n * augmenting this interface with e.g. `interface Build { type: 'development'; }`\n * Depending on the build some exported members have different types.\n * Possible values are `production`, `profiling` and `development`.\n * The default behavior for the types is to use a union of all possible types.\n */\n// tslint:disable-next-line: no-empty-interface\nexport interface Build {}\n\nexport type EnableSchedulerTracing = Build extends { type: infer BuildType }\n ? BuildType extends \"production\" | \"profiling\"\n ? false\n : BuildType extends \"development\"\n ? true\n : undefined\n : undefined;\n\ntype TypeByBuildFlag<\n Flag extends boolean | undefined,\n WhenTrue,\n WhenFalse\n> = Flag extends undefined\n ? (WhenTrue | WhenFalse)\n : Flag extends true\n ? WhenTrue\n : WhenFalse;\n\ntype IfSchedulerTracing = TypeByBuildFlag<\n EnableSchedulerTracing,\n WhenTrue,\n WhenFalse\n>;\n\nexport interface Interaction {\n __count: number;\n id: number;\n name: string;\n timestamp: number;\n}\n\nexport interface Subscriber {\n /**\n * A new interaction has been created via the trace() method.\n */\n onInteractionTraced: (interaction: Interaction) => void;\n\n /**\n * All scheduled async work for an interaction has finished.\n */\n onInteractionScheduledWorkCompleted: (interaction: Interaction) => void;\n\n /**\n * New async work has been scheduled for a set of interactions.\n * When this work is later run, onWorkStarted/onWorkStopped will be called.\n * A batch of async/yieldy work may be scheduled multiple times before completing.\n * In that case, onWorkScheduled may be called more than once before onWorkStopped.\n * Work is scheduled by a \"thread\" which is identified by a unique ID.\n */\n onWorkScheduled: (interactions: Set, threadID: number) => void;\n\n /**\n * A batch of scheduled work has been canceled.\n * Work is done by a \"thread\" which is identified by a unique ID.\n */\n onWorkCanceled: (interactions: Set, threadID: number) => void;\n\n /**\n * A batch of work has started for a set of interactions.\n * When this work is complete, onWorkStopped will be called.\n * Work is not always completed synchronously; yielding may occur in between.\n * A batch of async/yieldy work may also be re-started before completing.\n * In that case, onWorkStarted may be called more than once before onWorkStopped.\n * Work is done by a \"thread\" which is identified by a unique ID.\n */\n onWorkStarted: (interactions: Set, threadID: number) => void;\n\n /**\n * A batch of work has completed for a set of interactions.\n * Work is done by a \"thread\" which is identified by a unique ID.\n */\n onWorkStopped: (interactions: Set, threadID: number) => void;\n}\n\nexport interface InteractionsRef {\n current: Set;\n}\n\nexport interface SubscriberRef {\n current: Subscriber | null;\n}\n\nexport const __interactionsRef: IfSchedulerTracing;\nexport const __subscriberRef: IfSchedulerTracing;\n\nexport function unstable_clear(callback: () => T): T;\n\nexport function unstable_getCurrent(): Set | null;\n\nexport function unstable_getThreadID(): number;\n\nexport function unstable_trace(\n name: string,\n timestamp: number,\n callback: () => T,\n threadID?: number\n): T;\n\nexport type WrappedFunction any> = T & {\n cancel: () => void;\n};\n\n/**\n * The callback is immediately returned if the enableSchedulerTracing is disabled.\n * It is unclear for which bundles this is the case.\n *\n * @param callback\n * @param threadID\n */\nexport function unstable_wrap any>(\n callback: T,\n threadID?: number\n): IfSchedulerTracing, T>;\n\nexport function unstable_subscribe(subscriber: Subscriber): void;\n\nexport function unstable_unsubscribe(subscriber: Subscriber): void;\n" + } + }, + "/node_modules/csstype/index.d.ts": { + "module": { + "code": "export {};\n\nexport type PropertyValue = TValue extends Array\n ? Array\n : TValue extends infer TUnpacked & {}\n ? TUnpacked\n : TValue;\n\nexport type Fallback = { [P in keyof T]: T[P] | NonNullable[] };\n\nexport interface StandardLonghandProperties {\n /**\n * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements.\n *\n * **Syntax**: `auto | `\n *\n * **Initial value**: `auto`\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :----: | :-----: | :------: | :----: | :-: |\n * | **93** | **92** | **15.4** | **93** | No |\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/accent-color\n */\n accentColor?: Property.AccentColor | undefined;\n /**\n * The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.\n *\n * **Syntax**: `normal | | | ? `\n *\n * **Initial value**: `normal`\n *\n * ---\n *\n * _Supported in Flex Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :------: | :-----: | :-----: | :----: | :----: |\n * | **29** | **28** | **9** | **12** | **11** |\n * | 21 _-x-_ | | 7 _-x-_ | | |\n *\n * ---\n *\n * _Supported in Grid Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :----: | :-----: | :------: | :----: | :-: |\n * | **57** | **52** | **10.1** | **16** | No |\n *\n * ---\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/align-content\n */\n alignContent?: Property.AlignContent | undefined;\n /**\n * The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.\n *\n * **Syntax**: `normal | stretch | | [ ? ]`\n *\n * **Initial value**: `normal`\n *\n * ---\n *\n * _Supported in Flex Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :------: | :-----: | :-----: | :----: | :----: |\n * | **52** | **20** | **9** | **12** | **11** |\n * | 21 _-x-_ | | 7 _-x-_ | | |\n *\n * ---\n *\n * _Supported in Grid Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :----: | :-----: | :------: | :----: | :-: |\n * | **57** | **52** | **10.1** | **16** | No |\n *\n * ---\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/align-items\n */\n alignItems?: Property.AlignItems | undefined;\n /**\n * The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.\n *\n * **Syntax**: `auto | normal | stretch | | ? `\n *\n * **Initial value**: `auto`\n *\n * ---\n *\n * _Supported in Flex Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :------: | :-----: | :-----: | :----: | :----: |\n * | **36** | **20** | **9** | **12** | **11** |\n * | 21 _-x-_ | | 7 _-x-_ | | |\n *\n * ---\n *\n * _Supported in Grid Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :----: | :-----: | :------: | :----: | :----------: |\n * | **57** | **52** | **10.1** | **16** | **10** _-x-_ |\n *\n * ---\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/align-self\n */\n alignSelf?: Property.AlignSelf | undefined;\n /**\n * The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis.\n *\n * **Syntax**: `[ normal | | | ? ]#`\n *\n * **Initial value**: `normal`\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :----: | :-----: | :----: | :--: | :-: |\n * | No | n/a | No | No | No |\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/align-tracks\n */\n alignTracks?: Property.AlignTracks | undefined;\n /**\n * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.\n *\n * **Syntax**: `