├── .babelrc
├── .eslintignore
├── .eslintrc.js
├── .github
    └── workflows
    │   └── build.yml
├── .gitignore
├── .husky
    └── pre-commit
├── .npmrc
├── .prettierignore
├── .prettierrc.js
├── LICENSE
├── example
    ├── App.vue
    ├── components
    │   ├── dnd.vue
    │   ├── json.vue
    │   └── markdown.vue
    ├── files.d.ts
    ├── index.html
    ├── index.tsx
    ├── kbar.ts
    ├── react-input.ts
    ├── react-props.ts
    ├── tsconfig.json
    ├── types.d.ts
    └── xlog.tsx
├── package.json
├── pnpm-lock.yaml
├── readme.md
├── renovate.json
├── rollup.config.js
├── src
    ├── global.d.ts
    ├── index.ts
    ├── libs
    │   ├── react-dom.ts
    │   └── react.ts
    ├── react-types
    │   └── react
    │   │   ├── package.json
    │   │   └── react.d.ts
    ├── tsconfig.build.json
    ├── tsconfig.cjs.json
    ├── tsconfig.json
    ├── utils
    │   └── index.ts
    └── wrapper.ts
├── tsconfig.json
├── vite.config.js
└── vitest.config.ts


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     // if need react
4 |     // "@babel/preset-react"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | src/react-types/**
2 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true,
 6 |     es6: true,
 7 |   },
 8 |   extends: ['@innei-util/eslint-config-react-ts'],
 9 | }
10 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 3 | 
 4 | name: Node.js CI
 5 | 
 6 | on:
 7 |   push:
 8 |     branches: [master]
 9 |   pull_request:
10 |     branches: [master]
11 | 
12 | jobs:
13 |   build:
14 |     runs-on: ubuntu-latest
15 | 
16 |     strategy:
17 |       matrix:
18 |         node-version: [14.x, 16.x]
19 | 
20 |     steps:
21 |       - uses: actions/checkout@v2
22 |       - name: Use Node.js ${{ matrix.node-version }}
23 |         uses: actions/setup-node@v2
24 |         with:
25 |           node-version: ${{ matrix.node-version }}
26 |       - name: Cache pnpm modules
27 |         uses: actions/cache@v2
28 |         env:
29 |           cache-name: cache-pnpm-modules
30 |         with:
31 |           path: ~/.pnpm-store
32 |           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/package.json') }}
33 |           restore-keys: |
34 |             ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-
35 | 
36 |       - uses: pnpm/action-setup@v2.0.1
37 |         with:
38 |           version: 6.0.2
39 |           run_install: true
40 |       - run: pnpm run package
41 |       - run: pnpm run test
42 |         env:
43 |           CI: true
44 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | tags
  2 | node_modules
  3 | /node_modules
  4 | .DS_Store
  5 | # Logs
  6 | logs
  7 | *.log
  8 | npm-debug.log*
  9 | yarn-debug.log*
 10 | yarn-error.log*
 11 | lerna-debug.log*
 12 | 
 13 | # Diagnostic reports (https://nodejs.org/api/report.html)
 14 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 15 | 
 16 | # Runtime data
 17 | pids
 18 | *.pid
 19 | *.seed
 20 | *.pid.lock
 21 | 
 22 | # Directory for instrumented libs generated by jscoverage/JSCover
 23 | lib-cov
 24 | 
 25 | # Coverage directory used by tools like istanbul
 26 | coverage
 27 | *.lcov
 28 | 
 29 | # nyc test coverage
 30 | .nyc_output
 31 | 
 32 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 33 | .grunt
 34 | 
 35 | # Bower dependency directory (https://bower.io/)
 36 | bower_components
 37 | 
 38 | # node-waf configuration
 39 | .lock-wscript
 40 | 
 41 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 42 | build/Release
 43 | 
 44 | # Dependency directories
 45 | node_modules/
 46 | jspm_packages/
 47 | 
 48 | # Snowpack dependency directory (https://snowpack.dev/)
 49 | web_modules/
 50 | 
 51 | # TypeScript cache
 52 | *.tsbuildinfo
 53 | 
 54 | # Optional npm cache directory
 55 | .npm
 56 | 
 57 | # Optional eslint cache
 58 | .eslintcache
 59 | 
 60 | # Microbundle cache
 61 | .rpt2_cache/
 62 | .rts2_cache_cjs/
 63 | .rts2_cache_es/
 64 | .rts2_cache_umd/
 65 | 
 66 | # Optional REPL history
 67 | .node_repl_history
 68 | 
 69 | # Output of 'npm pack'
 70 | *.tgz
 71 | 
 72 | # Yarn Integrity file
 73 | .yarn-integrity
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | .parcel-cache
 78 | 
 79 | # Next.js build output
 80 | .next
 81 | 
 82 | # Nuxt.js build / generate output
 83 | .nuxt
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | 
 88 | # vuepress build output
 89 | .vuepress/dist
 90 | 
 91 | # Serverless directories
 92 | .serverless/
 93 | 
 94 | # FuseBox cache
 95 | .fusebox/
 96 | 
 97 | # DynamoDB Local files
 98 | .dynamodb/
 99 | 
100 | # TernJS port file
101 | .tern-port
102 | 
103 | # Stores VSCode versions used for testing VSCode extensions
104 | .vscode-test
105 | 
106 | # yarn v2
107 | 
108 | .yarn/cache
109 | .yarn/unplugged
110 | .yarn/build-state.yml
111 | .pnp.*
112 | 
113 | # vim
114 | ctag
115 | /tags
116 | .undodir
117 | 
118 | # idea
119 | # .idea/*
120 | 
121 | /dist
122 | /publish
123 | /build
124 | /lib
125 | /esm
126 | /types
127 | 
128 | example/dist
129 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | lint-staged
5 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | registry=https://registry.npmjs.org
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | src/react-types/**
2 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = require('@innei-util/prettier')
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Innei
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="pt-10"></div>
 3 |   <JSONView />
 4 |   <hr />
 5 | 
 6 |   <MdView />
 7 |   <hr />
 8 |   TestInput
 9 |   <TestInput :react-ref="inputRefCb" @react-mount="onMountedReact" />
10 |   <hr />
11 | 
12 |   <TestList>
13 |     <span>Vue</span>
14 |     <template #children>
15 |       <button @click="remove">remove</button>
16 | 
17 |       <p>React Button</p>
18 |     </template>
19 |   </TestList>
20 | 
21 |   <hr />
22 | 
23 |   <AppVue :react-ref="reactRef" />
24 | 
25 |   <button @click="pub">Pub</button>
26 |   <DnDView />
27 | </template>
28 | 
29 | <script lang="ts" setup>
30 | import { onMounted, reactive, ref } from 'vue'
31 | 
32 | import { createReactWrapper as $$ } from '../dist/index.esm'
33 | import { createReactWrapper } from '../src/wrapper'
34 | import DnDView from './components/dnd.vue'
35 | import JSONView from './components/json.vue'
36 | import MdView from './components/markdown.vue'
37 | import { ReactInput } from './react-input'
38 | import { List } from './react-props'
39 | import { App } from './xlog'
40 | 
41 | const AppVue = $$(App)
42 | const ref$ = ref()
43 | const reactRef = () => ref$
44 | 
45 | setTimeout(() => {
46 |   ref$.value.show()
47 | }, 1000)
48 | 
49 | const pub = () => {
50 |   const create = ref$.value.createOrUpdatePage
51 |   create({
52 |     title: 't',
53 |     publishedAt: '2023-04-01T14:42:02.945Z',
54 |     published: true,
55 |     excerpt: '',
56 |     slug: 't0' + Math.random(),
57 |     tags: '',
58 |     content: 'tttt',
59 |     siteId: 'innei-4525',
60 |     isPost: true,
61 |     externalUrl: 'https://innei-4525.xlog.app/posts/t',
62 |     applications: ['xlog'],
63 |   })
64 | }
65 | 
66 | console.log(ref$, 'reactRef')
67 | 
68 | const inputRef = ref<HTMLElement>()
69 | const reactiveProps = ref({
70 |   onChange(e) {
71 |     reactiveProps.value = e.target.value
72 |   },
73 |   value: '1',
74 | })
75 | const TestInput = createReactWrapper(ReactInput, reactiveProps)
76 | const inputRefCb = () => inputRef
77 | 
78 | const onMountedReact = () => {
79 |   console.log(inputRef)
80 | }
81 | const props2 = reactive({
82 |   data: ['0'],
83 |   onChange(data) {
84 |     props2.data = data
85 |   },
86 | })
87 | 
88 | const TestList = createReactWrapper(List, props2)
89 | const remove = () => {
90 |   props2.data.splice(props2.data.length - 1, 1)
91 | }
92 | </script>
93 | 


--------------------------------------------------------------------------------
/example/components/dnd.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import React from 'react'
  3 | import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'
  4 | // fake data generator
  5 | // @ts-ignore
  6 | import { jsx as _jsx } from 'react/jsx-runtime'
  7 | // @ts-ignore
  8 | import { jsxs as _jsxs } from 'react/jsx-runtime'
  9 | 
 10 | import { createReactWrapper } from '../../src/wrapper'
 11 | 
 12 | const getItems = (count, offset = 0) =>
 13 |   Array.from(
 14 |     {
 15 |       length: count,
 16 |     },
 17 |     (v, k) => k,
 18 |   ).map((k) => ({
 19 |     id: `item-${k + offset}`,
 20 |     content: `item ${k + offset}`,
 21 |   })) // a little function to help us with reordering the result
 22 | 
 23 | const reorder = (list, startIndex, endIndex) => {
 24 |   const result = Array.from(list)
 25 |   const [removed] = result.splice(startIndex, 1)
 26 |   result.splice(endIndex, 0, removed)
 27 |   return result
 28 | }
 29 | /**
 30 |  * Moves an item from one list to another list.
 31 |  */
 32 | 
 33 | const move = (source, destination, droppableSource, droppableDestination) => {
 34 |   const sourceClone = Array.from(source)
 35 |   const destClone = Array.from(destination)
 36 |   const [removed] = sourceClone.splice(droppableSource.index, 1)
 37 |   destClone.splice(droppableDestination.index, 0, removed)
 38 |   const result = {}
 39 |   result[droppableSource.droppableId] = sourceClone
 40 |   result[droppableDestination.droppableId] = destClone
 41 |   return result
 42 | }
 43 | 
 44 | const grid = 8
 45 | 
 46 | const getItemStyle = (isDragging, draggableStyle) => ({
 47 |   // some basic styles to make the items look a bit nicer
 48 |   userSelect: 'none',
 49 |   padding: grid * 2,
 50 |   margin: `0 0 ${grid}px 0`,
 51 |   // change background colour if dragging
 52 |   background: isDragging ? 'lightgreen' : 'grey',
 53 |   // styles we need to apply on draggables
 54 |   ...draggableStyle,
 55 | })
 56 | 
 57 | const getListStyle = (isDraggingOver) => ({
 58 |   background: isDraggingOver ? 'lightblue' : 'lightgrey',
 59 |   padding: grid,
 60 |   width: 250,
 61 | })
 62 | 
 63 | class App extends React.Component {
 64 |   state = {
 65 |     items: getItems(10),
 66 |     selected: getItems(5, 10),
 67 |   }
 68 |   /**
 69 |    * A semi-generic way to handle multiple lists. Matches
 70 |    * the IDs of the droppable container to the names of the
 71 |    * source arrays stored in the state.
 72 |    */
 73 | 
 74 |   id2List = {
 75 |     droppable: 'items',
 76 |     droppable2: 'selected',
 77 |   }
 78 |   getList = (id) => this.state[this.id2List[id]]
 79 |   onDragEnd = (result) => {
 80 |     const { source, destination } = result // dropped outside the list
 81 | 
 82 |     if (!destination) {
 83 |       return
 84 |     }
 85 | 
 86 |     if (source.droppableId === destination.droppableId) {
 87 |       const items = reorder(
 88 |         this.getList(source.droppableId),
 89 |         source.index,
 90 |         destination.index,
 91 |       )
 92 |       let state = {
 93 |         items,
 94 |       }
 95 | 
 96 |       if (source.droppableId === 'droppable2') {
 97 |         state = {
 98 |           selected: items,
 99 |         }
100 |       }
101 | 
102 |       this.setState(state)
103 |     } else {
104 |       const result = move(
105 |         this.getList(source.droppableId),
106 |         this.getList(destination.droppableId),
107 |         source,
108 |         destination,
109 |       )
110 |       this.setState({
111 |         items: result.droppable,
112 |         selected: result.droppable2,
113 |       })
114 |     }
115 |   } // Normally you would want to split things out into separate components.
116 |   // But in this example everything is just done in one place for simplicity
117 | 
118 |   render() {
119 |     return /*#__PURE__*/ _jsxs(DragDropContext, {
120 |       onDragEnd: this.onDragEnd,
121 |       children: [
122 |         /*#__PURE__*/ _jsx(Droppable, {
123 |           droppableId: 'droppable',
124 |           children: (provided, snapshot) =>
125 |             /*#__PURE__*/ _jsxs('div', {
126 |               ref: provided.innerRef,
127 |               style: getListStyle(snapshot.isDraggingOver),
128 |               children: [
129 |                 this.state.items.map((item, index) =>
130 |                   /*#__PURE__*/ _jsx(
131 |                     Draggable,
132 |                     {
133 |                       draggableId: item.id,
134 |                       index: index,
135 |                       children: (provided, snapshot) =>
136 |                         /*#__PURE__*/ _jsx('div', {
137 |                           ref: provided.innerRef,
138 |                           ...provided.draggableProps,
139 |                           ...provided.dragHandleProps,
140 |                           style: getItemStyle(
141 |                             snapshot.isDragging,
142 |                             provided.draggableProps.style,
143 |                           ),
144 |                           children: item.content,
145 |                         }),
146 |                     },
147 |                     item.id,
148 |                   ),
149 |                 ),
150 |                 provided.placeholder,
151 |               ],
152 |             }),
153 |         }),
154 |         /*#__PURE__*/ _jsx(Droppable, {
155 |           droppableId: 'droppable2',
156 |           children: (provided, snapshot) =>
157 |             /*#__PURE__*/ _jsxs('div', {
158 |               ref: provided.innerRef,
159 |               style: getListStyle(snapshot.isDraggingOver),
160 |               children: [
161 |                 this.state.selected.map((item, index) =>
162 |                   /*#__PURE__*/ _jsx(
163 |                     Draggable,
164 |                     {
165 |                       draggableId: item.id,
166 |                       index: index,
167 |                       children: (provided, snapshot) =>
168 |                         /*#__PURE__*/ _jsx('div', {
169 |                           ref: provided.innerRef,
170 |                           ...provided.draggableProps,
171 |                           ...provided.dragHandleProps,
172 |                           style: getItemStyle(
173 |                             snapshot.isDragging,
174 |                             provided.draggableProps.style,
175 |                           ),
176 |                           children: item.content,
177 |                         }),
178 |                     },
179 |                     item.id,
180 |                   ),
181 |                 ),
182 |                 provided.placeholder,
183 |               ],
184 |             }),
185 |         }),
186 |       ],
187 |     })
188 |   }
189 | } // Put the things into the DOM!
190 | 
191 | const DnDView = createReactWrapper(App)
192 | </script>
193 | 
194 | <template>
195 |   <DnDView />
196 | </template>
197 | 


--------------------------------------------------------------------------------
/example/components/json.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { NGi, NGrid, NInput } from 'naive-ui'
 3 | import ReactJSONView, { ReactJsonViewProps } from 'react-json-view'
 4 | import { reactive, ref, watch } from 'vue'
 5 | 
 6 | import { createReactWrapper } from '../../src/wrapper'
 7 | 
 8 | const initialJSON = {
 9 |   message: 'Hello world',
10 | }
11 | const jsonText = ref(JSON.stringify(initialJSON, null, 2))
12 | 
13 | const props: ReactJsonViewProps = reactive({
14 |   src: initialJSON,
15 |   onEdit(e) {
16 |     props.src = e.updated_src
17 |     jsonText.value = JSON.stringify(e.updated_src, null, 2)
18 |   },
19 | })
20 | 
21 | watch(
22 |   () => jsonText.value,
23 |   () => {
24 |     try {
25 |       props.src = JSON.parse(jsonText.value)
26 | 
27 |       console.log(props.src)
28 |     } catch {}
29 |   },
30 | )
31 | 
32 | const JSONView = createReactWrapper(ReactJSONView, props)
33 | </script>
34 | 
35 | <template>
36 |   <n-grid class="h-[300px] relative" x-gap="12" :cols="2">
37 |     <n-gi class="h-full flex flex-col">
38 |       <p>This is Vue component</p>
39 |       <n-input v-model:value="jsonText" type="textarea" class="flex-grow" />
40 |     </n-gi>
41 |     <n-gi>
42 |       This is React component
43 |       <JSONView />
44 |     </n-gi>
45 |   </n-grid>
46 | </template>
47 | 


--------------------------------------------------------------------------------
/example/components/markdown.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { NGi, NGrid, NInput } from 'naive-ui'
 3 | import ReactMarkdown, { Options } from 'react-markdown'
 4 | import { reactive, ref, watch } from 'vue'
 5 | 
 6 | import { createReactWrapper } from '../../src/wrapper'
 7 | 
 8 | const props: Options = reactive({ children: `# Hello world` })
 9 | const MdView = createReactWrapper(ReactMarkdown, props)
10 | </script>
11 | 
12 | <template>
13 |   <n-grid class="h-[300px] relative" x-gap="12" :cols="2">
14 |     <n-gi class="h-full">
15 |       This is Vue component
16 |       <n-input v-model:value="props.children" type="textarea" />
17 |     </n-gi>
18 |     <n-gi>
19 |       This is React component
20 |       <MdView />
21 |     </n-gi>
22 |   </n-grid>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/example/files.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import { DefineComponent } from 'vue'
3 |   const component: DefineComponent<{}, {}, any>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app">Hello!</div>
11 |     <script src="./index.tsx" type="module"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/example/index.tsx:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | 
3 | import 'uno.css'
4 | 
5 | import App from './App.vue'
6 | 
7 | createApp(App).mount('#app')
8 | 


--------------------------------------------------------------------------------
/example/kbar.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   KBarAnimator,
 3 |   KBarPortal,
 4 |   KBarPositioner,
 5 |   KBarProvider,
 6 |   KBarSearch,
 7 | } from 'kbar'
 8 | 
 9 | import React from '~/react-types/react/react'
10 | 
11 | export const KBar = () => {
12 |   return React.createElement(KBarProvider, {
13 |     actions: [
14 |       {
15 |         id: 'blog',
16 |         name: 'Blog',
17 |         shortcut: ['b'],
18 |         keywords: 'writing words',
19 |         perform: () => (window.location.pathname = 'blog'),
20 |       },
21 |       {
22 |         id: 'contact',
23 |         name: 'Contact',
24 |         shortcut: ['c'],
25 |         keywords: 'email',
26 |         perform: () => (window.location.pathname = 'contact'),
27 |       },
28 |     ],
29 |     children: [
30 |       React.createElement(KBarPortal, {
31 |         children: [
32 |           React.createElement(KBarPositioner, {
33 |             children: [
34 |               React.createElement(KBarAnimator, {
35 |                 children: [React.createElement(KBarSearch, {})],
36 |               }),
37 |             ],
38 |           }),
39 |         ],
40 |       }),
41 |       React.createElement('div', {
42 |         style: {
43 |           height: '100vh',
44 |         },
45 |       }),
46 |     ],
47 |   })
48 | }
49 | 


--------------------------------------------------------------------------------
/example/react-input.ts:
--------------------------------------------------------------------------------
 1 | import React, { forwardRef, useEffect, useState } from 'react'
 2 | 
 3 | export type ReactInputProps = { value: string; onChange: any }
 4 | export const ReactInput = forwardRef<HTMLInputElement, ReactInputProps>(
 5 |   (props, ref) => {
 6 |     const [state, setState] = useState(props)
 7 |     // useImperativeHandle(ref, () => {
 8 |     //   return {
 9 |     //     onPropsChange: (props: ReactInputProps) => {
10 |     //       setState(props)
11 |     //     },
12 |     //   }
13 |     // })
14 |     useEffect(() => {
15 |       setState(props)
16 |     }, [props])
17 |     return React.createElement('input', {
18 |       value: state.value,
19 |       onChange: state.onChange,
20 |       ref,
21 |     })
22 |   },
23 | )
24 | 


--------------------------------------------------------------------------------
/example/react-props.ts:
--------------------------------------------------------------------------------
 1 | import React, { forwardRef, useImperativeHandle } from 'react'
 2 | 
 3 | export const List = forwardRef<{}, { data: string[]; onChange: any }>(
 4 |   (props, ref) => {
 5 |     useImperativeHandle(
 6 |       () => ref,
 7 |       () => ({
 8 |         get() {
 9 |           return props.data
10 |         },
11 |       }),
12 |     )
13 | 
14 |     return React.createElement('div', null, [
15 |       React.createElement(
16 |         'ul',
17 |         null,
18 |         props.data.map((item) =>
19 |           React.createElement('li', { key: item }, item),
20 |         ),
21 |       ),
22 | 
23 |       React.createElement('div', { style: { display: 'flex', gap: '2rem' } }, [
24 |         React.createElement(
25 |           'button',
26 |           {
27 |             onClick() {
28 |               props.onChange([...props.data, props.data.length.toString()])
29 |             },
30 |           },
31 |           'add',
32 |         ),
33 | 
34 |         props.children,
35 |       ]),
36 |     ])
37 |   },
38 | )
39 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "baseUrl": ".",
 5 |     "jsx": "preserve",
 6 |     "paths": {
 7 |       "~/*": ["../src/*"],
 8 |       "~": ["../src"]
 9 |     }
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/example/types.d.ts:
--------------------------------------------------------------------------------
1 | import 'vite/client'
2 | 
3 | export {}
4 | 


--------------------------------------------------------------------------------
/example/xlog.tsx:
--------------------------------------------------------------------------------
  1 | // @ts-nocheck
  2 | import React, { forwardRef, useImperativeHandle } from 'react'
  3 | import Unidata from 'unidata.js'
  4 | import { WagmiConfig, createClient, useAccount } from 'wagmi'
  5 | 
  6 | import {
  7 |   ConnectKitProvider,
  8 |   getDefaultClientConfig,
  9 |   useAccountState,
 10 |   useConnectModal,
 11 | } from '@crossbell/connect-kit'
 12 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 13 | 
 14 | export { useAccount } from 'wagmi'
 15 | export { useAccountState, useConnectModal } from '@crossbell/connect-kit'
 16 | 
 17 | const IPFS_PREFIX = 'ipfs://'
 18 | const IPFS_GATEWAY = 'https://ipfs.4everland.xyz/ipfs/'
 19 | const CSB_IO = 'https://crossbell.io'
 20 | const OUR_DOMAIN = 'xlog.app'
 21 | 
 22 | const namespace = 'xlog'
 23 | let data = {}
 24 | try {
 25 |   data = JSON.parse(localStorage.getItem(namespace) || '{}')
 26 |   // eslint-disable-next-line no-empty
 27 | } catch (error) {}
 28 | const getKeys = (key) => {
 29 |   return Object.keys(data).filter((k) => k.startsWith(key))
 30 | }
 31 | const getStorage = (key) => {
 32 |   return data[key]
 33 | }
 34 | 
 35 | const getLocalPages = (input) => {
 36 |   const pages = []
 37 |   getKeys(`draft-${input.site}-`).forEach((key) => {
 38 |     const page = getStorage(key)
 39 |     if (input.isPost === undefined || page.isPost === input.isPost) {
 40 |       pages.push({
 41 |         id: key.replace(`draft-${input.site}-`, ''),
 42 |         title: page.values?.title,
 43 |         body: {
 44 |           content: page.values?.content,
 45 |           mime_type: 'text/markdown',
 46 |         },
 47 |         date_updated: new Date(page.date).toISOString(),
 48 |         date_published: page.values?.publishedAt,
 49 |         summary: {
 50 |           content: page.values?.excerpt,
 51 |           mime_type: 'text/markdown',
 52 |         },
 53 |         tags: [
 54 |           page.isPost ? 'post' : 'page',
 55 |           ...(page.values?.tags
 56 |             ?.split(',')
 57 |             .map((tag) => tag.trim())
 58 |             .filter((tag) => tag) || []),
 59 |         ],
 60 |         applications: ['xlog'],
 61 |         ...(page.values?.slug && {
 62 |           attributes: [
 63 |             {
 64 |               trait_type: 'xlog_slug',
 65 |               value: page.values?.slug,
 66 |             },
 67 |           ],
 68 |         }),
 69 |         preview: true,
 70 |       })
 71 |     }
 72 |   })
 73 |   return pages
 74 | }
 75 | async function createOrUpdatePage(input, customUnidata, newbieToken) {
 76 |   if (!input.published) {
 77 |     return await customUnidata.notes.set(
 78 |       {
 79 |         source: 'Crossbell Note',
 80 |         identity: input.siteId,
 81 |         platform: 'Crossbell',
 82 |         action: 'remove',
 83 |       },
 84 |       {
 85 |         id: input.pageId,
 86 |       },
 87 |       {
 88 |         newbieToken,
 89 |       },
 90 |     )
 91 |   }
 92 |   return await customUnidata.notes.set(
 93 |     {
 94 |       source: 'Crossbell Note',
 95 |       identity: input.siteId,
 96 |       platform: 'Crossbell',
 97 |       action: input.pageId ? 'update' : 'add',
 98 |     },
 99 |     {
100 |       ...(input.externalUrl && { related_urls: [input.externalUrl] }),
101 |       ...(input.pageId && { id: input.pageId }),
102 |       ...(input.title && { title: input.title }),
103 |       ...(input.content && {
104 |         body: {
105 |           content: input.content,
106 |           mime_type: 'text/markdown',
107 |         },
108 |       }),
109 |       ...(input.publishedAt && {
110 |         date_published: input.publishedAt,
111 |       }),
112 |       ...(input.excerpt && {
113 |         summary: {
114 |           content: input.excerpt,
115 |           mime_type: 'text/markdown',
116 |         },
117 |       }),
118 |       tags: [
119 |         input.isPost ? 'post' : 'page',
120 |         ...(input.tags
121 |           ?.split(',')
122 |           .map((tag) => tag.trim())
123 |           .filter((tag) => tag) || []),
124 |       ],
125 |       applications: [
126 |         'xlog',
127 |         ...(input.applications?.filter((app) => app !== 'xlog') || []),
128 |       ],
129 |       ...(input.slug && {
130 |         attributes: [
131 |           {
132 |             trait_type: 'xlog_slug',
133 |             value: input.slug,
134 |           },
135 |         ],
136 |       }),
137 |     },
138 |     {
139 |       newbieToken,
140 |     },
141 |   )
142 | }
143 | async function getPage(input, customUnidata) {
144 |   if (!input.site || !(input.page || input.pageId)) {
145 |     return null
146 |   }
147 |   const mustLocal = input.pageId?.startsWith('local-')
148 |   let page = null
149 |   if (!mustLocal) {
150 |     // on-chain page
151 |     if (!input.pageId) {
152 |       const params = new URLSearchParams()
153 |       params.append('handle', input.site)
154 |       input.page && params.append('slug', input.page)
155 |       const slug2Id = await fetch(
156 |         `https://xlog.app` + `/api/slug2id?${params.toString()}`,
157 |       ).then((res) => res.json())
158 |       if (!slug2Id?.noteId) {
159 |         return null
160 |       }
161 |       input.pageId = `${slug2Id.characterId}-${slug2Id.noteId}`
162 |     }
163 |     const pages = await customUnidata.notes.get({
164 |       source: 'Crossbell Note',
165 |       identity: input.site,
166 |       platform: 'Crossbell',
167 |       filter: {
168 |         id: input.pageId,
169 |       },
170 |     })
171 |     page = pages?.list[0] || null
172 |   }
173 |   // local page
174 |   const local = getLocalPages({
175 |     site: input.site,
176 |   })
177 |   const localPage = local.find(
178 |     (page) => page.id === input.page || page.id === input.pageId,
179 |   )
180 |   if (localPage) {
181 |     if (page) {
182 |       if (new Date(localPage.date_updated) > new Date(page.date_updated)) {
183 |         localPage.metadata = page.metadata
184 |         page = localPage
185 |       }
186 |     } else {
187 |       page = localPage
188 |     }
189 |   }
190 |   return page
191 | }
192 | 
193 | let unidata
194 | const useUnidata = () => {
195 |   const { connector, isConnected } = useAccount()
196 |   if (isConnected && connector) {
197 |     connector?.getProvider().then((provider) => {
198 |       unidata = new Unidata({
199 |         ethereumProvider: provider,
200 |         ipfsGateway: IPFS_GATEWAY,
201 |       })
202 |     })
203 |   } else {
204 |     unidata = new Unidata({
205 |       ipfsGateway: IPFS_GATEWAY,
206 |     })
207 |   }
208 |   return unidata
209 | }
210 | function useCreateOrUpdatePage() {
211 |   const newbieToken = useAccountState((s) => s.email?.token)
212 |   const unidata = useUnidata()
213 |   return (payload) => createOrUpdatePage(payload, unidata, newbieToken)
214 | }
215 | 
216 | const toGateway = (url) => {
217 |   const ipfsUrl = toIPFS(url)
218 |   return ipfsUrl?.replaceAll(IPFS_PREFIX, IPFS_GATEWAY)
219 | }
220 | const toIPFS = (url) => {
221 |   return url
222 |     ?.replaceAll(IPFS_GATEWAY, IPFS_PREFIX)
223 |     .replaceAll('https://gateway.ipfs.io/ipfs/', IPFS_PREFIX)
224 |     .replaceAll('https://ipfs.io/ipfs/', IPFS_PREFIX)
225 |     .replaceAll('https://cf-ipfs.com/ipfs/', IPFS_PREFIX)
226 |     .replaceAll('https://ipfs.4everland.xyz/ipfs/', IPFS_PREFIX)
227 |     .replaceAll('https://rss3.mypinata.cloud/ipfs/', IPFS_PREFIX)
228 | }
229 | 
230 | const getSiteLink = ({ domain, subdomain, noProtocol }) => {
231 |   if (domain) {
232 |     return `https://${domain}`
233 |   }
234 |   if (noProtocol) {
235 |     return `${subdomain}.${OUR_DOMAIN}`
236 |   }
237 |   return `https://${subdomain}.${OUR_DOMAIN}`
238 | }
239 | const getNoteSlug = (note) => {
240 |   return (
241 |     note.metadata?.content?.attributes?.find(
242 |       (a) => a?.trait_type === 'xlog_slug',
243 |     )?.value ||
244 |     note.metadata?.content?._xlog_slug ||
245 |     note.metadata?.content?._crosslog_slug
246 |   )?.toLowerCase?.()
247 | }
248 | 
249 | const urlComposer = {
250 |   characterUrl: ({ handle }) => getSiteLink({ subdomain: handle }),
251 |   noteUrl: (note) => {
252 |     let originalNote = note
253 |     while (originalNote?.toNote) {
254 |       originalNote = originalNote.toNote
255 |     }
256 |     if (originalNote.metadata?.content?.sources?.includes('xlog')) {
257 |       if (originalNote.metadata?.content?.external_urls?.[0]) {
258 |         return (
259 |           originalNote.metadata.content.external_urls[0] +
260 |           (originalNote !== note ? `#comments` : '')
261 |         )
262 |       } else {
263 |         const { character } = originalNote
264 |         if (character) {
265 |           return `${getSiteLink({
266 |             subdomain: character.handle,
267 |           })}/${getNoteSlug(originalNote)}${
268 |             originalNote !== note ? `#comments` : ''
269 |           }`
270 |         } else {
271 |           return ''
272 |         }
273 |       }
274 |     } else {
275 |       return `${CSB_IO}/notes/${note.characterId}-${note.noteId}`
276 |     }
277 |   },
278 | }
279 | 
280 | const wagmiClient = createClient(getDefaultClientConfig({ appName: 'xLog' }))
281 | const queryClient = new QueryClient({
282 |   defaultOptions: {
283 |     queries: {
284 |       cacheTime: 1000 * 60 * 60 * 24, // 24 hours
285 |     },
286 |   },
287 | })
288 | const App = forwardRef((props, ref) => {
289 |   return React.createElement(
290 |     WagmiConfig,
291 |     { client: wagmiClient },
292 |     React.createElement(
293 |       QueryClientProvider,
294 |       { client: queryClient },
295 |       React.createElement(
296 |         ConnectKitProvider,
297 |         { ipfsLinkToHttpLink: toGateway, urlComposer },
298 |         React.createElement(Instance, { ref }),
299 |         props.children,
300 |       ),
301 |     ),
302 |   )
303 | })
304 | const Instance = forwardRef((props, ref) => {
305 |   const model = useConnectModal()
306 |   const poster = useCreateOrUpdatePage()
307 |   useImperativeHandle(ref, () => {
308 |     return {
309 |       show() {
310 |         model.show()
311 |       },
312 |       connectModal: model,
313 |       createOrUpdatePage: (...rest) => {
314 |         return poster.call(null, ...rest)
315 |       },
316 |     }
317 |   })
318 |   // TODO GC
319 |   // useEffect(() => {}, [])
320 |   return null
321 | })
322 | 
323 | export {
324 |   App,
325 |   IPFS_GATEWAY,
326 |   IPFS_PREFIX,
327 |   createOrUpdatePage,
328 |   getLocalPages,
329 |   getPage,
330 |   useCreateOrUpdatePage,
331 |   useUnidata,
332 | }
333 | // # sourceMappingURL=index.js.map
334 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "vue-react-wrapper",
  3 |   "version": "0.3.1",
  4 |   "description": "A wrapper of React, use React in Vue with data reactive",
  5 |   "author": "Innei",
  6 |   "license": "MIT",
  7 |   "main": "dist/index.cjs.js",
  8 |   "module": "dist/index.esm.js",
  9 |   "types": "dist/index.d.ts",
 10 |   "unpkg": "dist/index.umd.min.js",
 11 |   "exports": {
 12 |     ".": {
 13 |       "import": "./dist/index.esm.js",
 14 |       "require": "./dist/index.cjs.js",
 15 |       "types": "./dist/index.d.ts"
 16 |     },
 17 |     "./react": {
 18 |       "import": "./esm/libs/react.js",
 19 |       "require": "./lib/libs/react.js",
 20 |       "types": "./esm/libs/react.d.ts"
 21 |     },
 22 |     "./react-dom": {
 23 |       "import": "./esm/libs/react-dom.js",
 24 |       "require": "./lib/libs/react-dom.js",
 25 |       "types": "./esm/libs/react-dom.d.ts"
 26 |     }
 27 |   },
 28 |   "files": [
 29 |     "src",
 30 |     "dist",
 31 |     "lib",
 32 |     "esm",
 33 |     "readme.md",
 34 |     "tsconfig.json"
 35 |   ],
 36 |   "engines": {
 37 |     "pnpm": ">=7"
 38 |   },
 39 |   "husky": {
 40 |     "hooks": {
 41 |       "pre-commit": "lint-staged"
 42 |     }
 43 |   },
 44 |   "lint-staged": {
 45 |     "*.{js,jsx,ts,tsx}": [
 46 |       "prettier --ignore-path ./.prettierignore --write ",
 47 |       "eslint --cache"
 48 |     ]
 49 |   },
 50 |   "scripts": {
 51 |     "prepare": "husky install",
 52 |     "predeploy": "rm -rf example/dist",
 53 |     "prebuild": "rm -rf rm -rf lib && rm -rf esm",
 54 |     "build": "ttsc --build src/tsconfig.build.json && ttsc --build src/tsconfig.cjs.json",
 55 |     "package": "NODE_ENV=production npm run build && rollup -c",
 56 |     "postpackage": "dts-bundle-generator -o dist/index.d.ts src/index.ts --project tsconfig.json  --no-check",
 57 |     "prepackage": "rm -rf build",
 58 |     "dev": "vite",
 59 |     "build:vite": "vite build",
 60 |     "preview": "vite preview --port 2323",
 61 |     "deploy": "vite build && gh-pages -d example/dist",
 62 |     "test": "vitest "
 63 |   },
 64 |   "bump": {
 65 |     "before": [
 66 |       "npm run package"
 67 |     ],
 68 |     "publish": true
 69 |   },
 70 |   "peerDependencies": {
 71 |     "vue": "^3"
 72 |   },
 73 |   "devDependencies": {
 74 |     "@crossbell/connect-kit": "0.0.55",
 75 |     "@crossbell/contract": "0.0.55",
 76 |     "@innei-util/eslint-config-react-ts": "0.8.2",
 77 |     "@innei-util/eslint-config-ts": "latest",
 78 |     "@innei-util/prettier": "latest",
 79 |     "@rollup/plugin-commonjs": "22.0.0",
 80 |     "@rollup/plugin-node-resolve": "13.3.0",
 81 |     "@rollup/plugin-typescript": "8.3.2",
 82 |     "@tanstack/react-query": "4.28.0",
 83 |     "@types/node": "17.0.31",
 84 |     "@types/react-beautiful-dnd": "13.1.2",
 85 |     "@unocss/preset-wind": "0.33.2",
 86 |     "@vitejs/plugin-vue": "2.3.2",
 87 |     "@zerollup/ts-transform-paths": "1.7.18",
 88 |     "dts-bundle-generator": "6.9.0",
 89 |     "gh-pages": "3.2.3",
 90 |     "husky": "8.0.1",
 91 |     "lint-staged": "12.4.1",
 92 |     "naive-ui": "2.28.4",
 93 |     "prettier": "2.6.2",
 94 |     "react-beautiful-dnd": "13.1.0",
 95 |     "react-json-view": "1.21.3",
 96 |     "react-markdown": "8.0.3",
 97 |     "rollup": "2.72.1",
 98 |     "rollup-plugin-peer-deps-external": "2.2.4",
 99 |     "rollup-plugin-terser": "7.0.2",
100 |     "tslib": "2.4.0",
101 |     "ttypescript": "1.5.13",
102 |     "typescript": "4.6.4",
103 |     "unocss": "0.33.2",
104 |     "vite": "2.9.8",
105 |     "vite-tsconfig-paths": "3.4.1",
106 |     "vitest": "0.12.1",
107 |     "vue": "3.2.33",
108 |     "unidata.js": "0.7.17",
109 |     "kbar": "0.1.0-beta.34",
110 |     "wagmi": "0.12.8"
111 |   },
112 |   "dependencies": {
113 |     "@types/prop-types": "*",
114 |     "@types/react": "./src/react-types/react",
115 |     "@types/react-dom": "18.0.3",
116 |     "@types/scheduler": "*",
117 |     "csstype": "^3.0.2",
118 |     "react": "^18.1.0",
119 |     "react-dom": "^18.1.0"
120 |   },
121 |   "resolutions": {
122 |     "@types/react": "./src/react-types/react"
123 |   }
124 | }
125 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # Vue React Wrapper
  2 | 
  3 | Status: Alpha
  4 | 
  5 | A wrapper of react component, use react component in vue quickly.
  6 | 
  7 | ## Why
  8 | 
  9 | As we all know, Vue 3 is becoming more and more popular, not only for its light weight, but also for its efficient performance. However, Vue's ecology has always been lacking, and in some cases, there is no substitute for the same React component.
 10 | 
 11 | I just wanted to find a JSONViewer for Vue 3, but there wasn't one, but the React ecosystem blossomed.
 12 | 
 13 | So, is there a way to use React in Vue? Only in a certain scenario, because the whole business uses Vue and only a few scenarios need React support, so it is not a big problem to mix the two frameworks. In the decimal scenario, createReactWrapper can be dynamically imported to reduce the first loading bundle size of the entire App.
 14 | 
 15 | ## Install
 16 | 
 17 | ```
 18 | npm i vue-react-wrapper
 19 | ```
 20 | 
 21 | ## Requirement
 22 | 
 23 | - Vue 3
 24 | 
 25 | ## Setting TSConfig
 26 | 
 27 | ```json
 28 | {
 29 |   "compilerOptions": {
 30 |     "jsxImportSource": "vue"
 31 |   }
 32 | }
 33 | ```
 34 | 
 35 | ## Simple Usage
 36 | 
 37 | Example for [react-json-view](https://github.com/mac-s-g/react-json-view)
 38 | 
 39 | ```tsx
 40 | import ReactJSONView from 'react-json-view'
 41 | import { defineComponent, reactive } from 'vue'
 42 | import { createReactWrapper } from 'vue-react-wrapper'
 43 | 
 44 | // must pass a vue reactive object or Ref
 45 | const props = reactive({
 46 |   // ref type also work
 47 |   // props
 48 |   src: null as any,
 49 |   indentWidth: 2,
 50 |   theme: 'rjv-default',
 51 | })
 52 | 
 53 | // JSONView is vue component
 54 | // ReactJSONView is a React Component
 55 | const JSONView = createReactWrapper(ReactJSONView, props)
 56 | 
 57 | export default defineComponent({
 58 |   setup() {
 59 |     return () => <JSONView />
 60 |   },
 61 | })
 62 | ```
 63 | 
 64 | And if you prefer write vue sfc.
 65 | 
 66 | ```vue
 67 | <template>
 68 |   <JSONView />
 69 | </template>
 70 | 
 71 | <script setup lang="ts">
 72 | import ReactJSONView from 'react-json-view'
 73 | import { reactive } from 'vue'
 74 | import { createReactWrapper } from 'vue-react-wrapper'
 75 | 
 76 | // must pass a vue reactive object or ref type
 77 | const props = ref({
 78 |   // or reactive
 79 |   // props
 80 |   src: null as any,
 81 |   indentWidth: 2,
 82 |   theme: 'rjv-default',
 83 | })
 84 | 
 85 | // JSONView is vue component
 86 | // ReactJSONView is a React Component
 87 | const JSONView = createReactWrapper(ReactJSONView, props)
 88 | </script>
 89 | ```
 90 | 
 91 | ## Pass slot or react children
 92 | 
 93 | Here is a simple React component.
 94 | 
 95 | ```ts
 96 | export const List = (props) => {
 97 |   return React.createElement('div', null, [
 98 |     React.createElement(
 99 |       'ul',
100 |       null,
101 |       props.data.map((item) => React.createElement('li', { key: item }, item)),
102 |     ),
103 | 
104 |     props.children,
105 |   ])
106 | }
107 | ```
108 | 
109 | Pass react children like this.
110 | 
111 | ```vue
112 | <template>
113 |   <VList>
114 |     <template #children>
115 |       <button @click="remove">remove</button>
116 |     </template>
117 |   </VList>
118 | </template>
119 | 
120 | <script lang="ts" setup>
121 | import { createReactWrapper } from 'vue-react-wrapper'
122 | 
123 | const props = reactive({
124 |   data: ['0', '1', '2'],
125 | })
126 | 
127 | const VList = createReactWrapper(List, props)
128 | 
129 | const remove = () => {
130 |   props.data.splice(props.data.length - 1, 1)
131 | }
132 | 
133 | // and props pass into react will be reactive.
134 | </script>
135 | ```
136 | 
137 | Pass default slot just change to this. Unlike the above, this will be injected into the Vue container instead of the React Children scope.
138 | 
139 | ```vue
140 | <template>
141 |   <VList>
142 |     <button @click="remove">remove</button>
143 |   </VList>
144 | </template>
145 | ```
146 | 
147 | ## Get react component inner ref
148 | 
149 | ```vue
150 | <template>
151 |   <TestInput :react-ref="inputRefCb" @react-mount="onMountedReact" />
152 | </template>
153 | 
154 | <script lang="ts" setup>
155 | const reactiveProps = ref({
156 |   onChange(e) {
157 |     reactiveProps.value = e.target.value
158 |   },
159 |   value: '1',
160 | })
161 | 
162 | const TestInput = createReactWrapper(ReactInput, reactiveProps)
163 | const inputRef = ref<HTMLElement>()
164 | const inputRefCb = () => inputRef // because vue template sfc will automatically destruct ref.value so pass a function wrapped ref
165 | 
166 | const onMountedReact = () => {
167 |   console.log(inputRef) // can access ref here
168 | }
169 | </script>
170 | ```
171 | 
172 | ## Access react lifecycle
173 | 
174 | - pass `:onReactMount` or `@react-mount`
175 | - pass `:onReactUnMount` or `@react-unmount`
176 | 
177 | ## Other usage
178 | 
179 | Check `./example/App.vue`
180 | 
181 | ## TODO
182 | 
183 | - [x] support react forwardRef
184 | - [ ] support root react container and root context
185 | - [x] support pass vue ref
186 | - [x] react types without global jsx namespace
187 | 
188 | ## Reference
189 | 
190 | Other similar libraries.
191 | 
192 | - For Vue 2 [vuera](https://github.com/akxcv/vuera)
193 | 
194 | ## License
195 | 
196 | MIT. Coding with ❤.
197 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "enabled": false,
 3 |   "extends": [
 4 |     "config:base",
 5 |     ":semanticCommits",
 6 |     ":automergePatch",
 7 |     ":automergeTypes",
 8 |     ":automergeTesters",
 9 |     ":automergeLinters",
10 |     ":automergeMinor",
11 |     ":rebaseStalePrs"
12 |   ],
13 |   "packageRules": [
14 |     {
15 |       "updateTypes": ["major"],
16 |       "labels": ["UPDATE-MAJOR"]
17 |     }
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // import { babel } from '@rollup/plugin-babel'
 3 | import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 4 | import { terser } from 'rollup-plugin-terser'
 5 | 
 6 | import commonjs from '@rollup/plugin-commonjs'
 7 | // import esbuild from 'rollup-plugin-esbuild'
 8 | import { nodeResolve } from '@rollup/plugin-node-resolve'
 9 | import typescript from '@rollup/plugin-typescript'
10 | 
11 | const packageJson = require('./package.json')
12 | 
13 | const umdName = packageJson.name
14 | 
15 | const globals = {
16 |   ...packageJson.dependencies,
17 | }
18 | 
19 | const dir = 'dist'
20 | 
21 | /**
22 |  * @type {import('rollup').RollupOptions[]}
23 |  */
24 | const config = [
25 |   {
26 |     input: 'src/index.ts',
27 |     // ignore lib
28 |     external: [...Object.keys(globals)],
29 | 
30 |     output: [
31 |       {
32 |         file: `${dir}/index.umd.js`,
33 |         format: 'umd',
34 |         sourcemap: true,
35 |         name: umdName,
36 |       },
37 |       {
38 |         file: `${dir}/index.umd.min.js`,
39 |         format: 'umd',
40 |         sourcemap: true,
41 |         name: umdName,
42 |         plugins: [terser()],
43 |       },
44 |       {
45 |         file: `${dir}/index.cjs.js`,
46 |         format: 'cjs',
47 |         sourcemap: true,
48 |       },
49 |       {
50 |         file: `${dir}/index.cjs.min.js`,
51 |         format: 'cjs',
52 |         sourcemap: true,
53 |         plugins: [terser()],
54 |       },
55 |       {
56 |         file: `${dir}/index.esm.js`,
57 |         format: 'es',
58 |         sourcemap: true,
59 |       },
60 |       {
61 |         file: `${dir}/index.esm.min.js`,
62 |         format: 'es',
63 |         sourcemap: true,
64 |         plugins: [terser()],
65 |       },
66 |     ],
67 |     plugins: [
68 |       nodeResolve(),
69 |       commonjs({ include: 'node_modules/**' }),
70 |       typescript({ tsconfig: './src/tsconfig.json', declaration: false }),
71 |       // esbuild({
72 |       //   include: /\.[jt]sx?$/,
73 |       //   exclude: /node_modules/,
74 |       //   sourceMap: false,
75 |       //   minify: process.env.NODE_ENV === 'production',
76 |       //   target: 'es2017',
77 |       //   jsxFactory: 'React.createElement',
78 |       //   jsxFragment: 'React.Fragment',
79 |       //   define: {
80 |       //     __VERSION__: '"x.y.z"',
81 |       //   },
82 |       //   tsconfig: './src/tsconfig.json',
83 |       //   loaders: {
84 |       //     '.json': 'json',
85 |       //     '.js': 'jsx',
86 |       //   },
87 |       // }),
88 |       // @ts-ignore
89 |       peerDepsExternal(),
90 |       // babel({}),
91 |     ],
92 | 
93 |     treeshake: true,
94 |   },
95 | ]
96 | 
97 | export default config
98 | 


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | declare global {}
2 | export * from 'vite/client'
3 | export {}
4 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { createRoot, hydrateRoot } from 'react-dom/client'
3 | 
4 | export * from './wrapper'
5 | 
6 | export { React, createRoot, hydrateRoot }
7 | 


--------------------------------------------------------------------------------
/src/libs/react-dom.ts:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom'
 2 | 
 3 | export {
 4 |   createPortal,
 5 |   findDOMNode,
 6 |   flushSync,
 7 |   unmountComponentAtNode,
 8 | } from 'react-dom'
 9 | export default ReactDOM
10 | 


--------------------------------------------------------------------------------
/src/libs/react.ts:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export {
 4 |   useCallback,
 5 |   useContext,
 6 |   useDebugValue,
 7 |   useDeferredValue,
 8 |   useEffect,
 9 |   useId,
10 |   useImperativeHandle,
11 |   useInsertionEffect,
12 |   useLayoutEffect,
13 |   useMemo,
14 |   useReducer,
15 |   useRef,
16 |   useState,
17 |   useSyncExternalStore,
18 |   useTransition,
19 |   createContext,
20 |   createElement,
21 |   createFactory,
22 |   createRef,
23 |   cloneElement,
24 |   isValidElement,
25 |   forwardRef,
26 |   lazy,
27 |   startTransition,
28 |   memo,
29 |   version,
30 | } from 'react'
31 | 
32 | export default React
33 | 


--------------------------------------------------------------------------------
/src/react-types/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "@types/react",
3 |   "types": "./react.d.ts",
4 |   "dependencies": {}
5 | }


--------------------------------------------------------------------------------
/src/react-types/react/react.d.ts:
--------------------------------------------------------------------------------
   1 | // Type definitions for React 17.0
   2 | // Project: http://facebook.github.io/react/
   3 | // Definitions by: Asana <https://asana.com>
   4 | //                 AssureSign <http://www.assuresign.com>
   5 | //                 Microsoft <https://microsoft.com>
   6 | //                 John Reilly <https://github.com/johnnyreilly>
   7 | //                 Benoit Benezech <https://github.com/bbenezech>
   8 | //                 Patricio Zavolinsky <https://github.com/pzavolinsky>
   9 | //                 Eric Anderson <https://github.com/ericanderson>
  10 | //                 Dovydas Navickas <https://github.com/DovydasNavickas>
  11 | //                 Josh Rutherford <https://github.com/theruther4d>
  12 | //                 Guilherme Hübner <https://github.com/guilhermehubner>
  13 | //                 Ferdy Budhidharma <https://github.com/ferdaber>
  14 | //                 Johann Rakotoharisoa <https://github.com/jrakotoharisoa>
  15 | //                 Olivier Pascal <https://github.com/pascaloliv>
  16 | //                 Martin Hochel <https://github.com/hotell>
  17 | //                 Frank Li <https://github.com/franklixuefei>
  18 | //                 Jessica Franco <https://github.com/Jessidhia>
  19 | //                 Saransh Kataria <https://github.com/saranshkataria>
  20 | //                 Kanitkorn Sujautra <https://github.com/lukyth>
  21 | //                 Sebastian Silbermann <https://github.com/eps1lon>
  22 | //                 Kyle Scully <https://github.com/zieka>
  23 | //                 Cong Zhang <https://github.com/dancerphil>
  24 | //                 Dimitri Mitropoulos <https://github.com/dimitropoulos>
  25 | //                 JongChan Choi <https://github.com/disjukr>
  26 | //                 Victor Magalhães <https://github.com/vhfmag>
  27 | //                 Dale Tan <https://github.com/hellatan>
  28 | //                 Priyanshu Rav <https://github.com/priyanshurav>
  29 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
  30 | // TypeScript Version: 2.8
  31 | 
  32 | // NOTE: Users of the upcoming React 18 release should add a reference
  33 | // to 'react/next' in their project. See next.d.ts's top comment
  34 | // for reference and documentation on how exactly to do it.
  35 | 
  36 | // NOTE: Users of the `experimental` builds of React should add a reference
  37 | // to 'react/experimental' in their project. See experimental.d.ts's top comment
  38 | // for reference and documentation on how exactly to do it.
  39 | 
  40 | /// <reference path="global.d.ts" />
  41 | 
  42 | import * as CSS from 'csstype';
  43 | import * as PropTypes from 'prop-types';
  44 | import { Interaction as SchedulerInteraction } from 'scheduler/tracing';
  45 | 
  46 | type NativeAnimationEvent = AnimationEvent;
  47 | type NativeClipboardEvent = ClipboardEvent;
  48 | type NativeCompositionEvent = CompositionEvent;
  49 | type NativeDragEvent = DragEvent;
  50 | type NativeFocusEvent = FocusEvent;
  51 | type NativeKeyboardEvent = KeyboardEvent;
  52 | type NativeMouseEvent = MouseEvent;
  53 | type NativeTouchEvent = TouchEvent;
  54 | type NativePointerEvent = PointerEvent;
  55 | type NativeTransitionEvent = TransitionEvent;
  56 | type NativeUIEvent = UIEvent;
  57 | type NativeWheelEvent = WheelEvent;
  58 | type Booleanish = boolean | 'true' | 'false';
  59 | 
  60 | declare const UNDEFINED_VOID_ONLY: unique symbol;
  61 | // Destructors are only allowed to return void.
  62 | type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };
  63 | 
  64 | // tslint:disable-next-line:export-just-namespace
  65 | export = React;
  66 | export as namespace React;
  67 | 
  68 | declare namespace React {
  69 |     //
  70 |     // React Elements
  71 |     // ----------------------------------------------------------------------
  72 | 
  73 |     type ElementType<P = any> =
  74 |         {
  75 |             [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never
  76 |         }[keyof JSX.IntrinsicElements] |
  77 |         ComponentType<P>;
  78 |     /**
  79 |      * @deprecated Please use `ElementType`
  80 |      */
  81 |     type ReactType<P = any> = ElementType<P>;
  82 |     type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
  83 | 
  84 |     type JSXElementConstructor<P> =
  85 |         | ((props: P) => ReactElement<any, any> | null)
  86 |         | (new (props: P) => Component<P, any>);
  87 | 
  88 |     interface RefObject<T> {
  89 |         readonly current: T | null;
  90 |     }
  91 |     type RefCallback<T> = { bivarianceHack(instance: T | null): void }["bivarianceHack"];
  92 |     type Ref<T> = RefCallback<T> | RefObject<T> | null;
  93 |     type LegacyRef<T> = string | Ref<T>;
  94 |     /**
  95 |      * Gets the instance type for a React element. The instance will be different for various component types:
  96 |      *
  97 |      * - React class components will be the class instance. So if you had `class Foo extends React.Component<{}> {}`
  98 |      *   and used `React.ElementRef<typeof Foo>` then the type would be the instance of `Foo`.
  99 |      * - React stateless functional components do not have a backing instance and so `React.ElementRef<typeof Bar>`
 100 |      *   (when `Bar` is `function Bar() {}`) will give you the `undefined` type.
 101 |      * - JSX intrinsics like `div` will give you their DOM instance. For `React.ElementRef<'div'>` that would be
 102 |      *   `HTMLDivElement`. For `React.ElementRef<'input'>` that would be `HTMLInputElement`.
 103 |      * - React stateless functional components that forward a `ref` will give you the `ElementRef` of the forwarded
 104 |      *   to component.
 105 |      *
 106 |      * `C` must be the type _of_ a React component so you need to use typeof as in React.ElementRef<typeof MyComponent>.
 107 |      *
 108 |      * @todo In Flow, this works a little different with forwarded refs and the `AbstractComponent` that
 109 |      *       `React.forwardRef()` returns.
 110 |      */
 111 |     type ElementRef<
 112 |         C extends
 113 |             | ForwardRefExoticComponent<any>
 114 |             | { new (props: any): Component<any> }
 115 |             | ((props: any, context?: any) => ReactElement | null)
 116 |             | keyof JSX.IntrinsicElements
 117 |     > =
 118 |         // need to check first if `ref` is a valid prop for ts@3.0
 119 |         // otherwise it will infer `{}` instead of `never`
 120 |         "ref" extends keyof ComponentPropsWithRef<C>
 121 |             ? NonNullable<ComponentPropsWithRef<C>["ref"]> extends Ref<
 122 |                 infer Instance
 123 |             >
 124 |                 ? Instance
 125 |                 : never
 126 |             : never;
 127 | 
 128 |     type ComponentState = any;
 129 | 
 130 |     type Key = string | number;
 131 | 
 132 |     /**
 133 |      * @internal You shouldn't need to use this type since you never see these attributes
 134 |      * inside your component or have to validate them.
 135 |      */
 136 |     interface Attributes {
 137 |         key?: Key | null | undefined;
 138 |     }
 139 |     interface RefAttributes<T> extends Attributes {
 140 |         ref?: Ref<T> | undefined;
 141 |     }
 142 |     interface ClassAttributes<T> extends Attributes {
 143 |         ref?: LegacyRef<T> | undefined;
 144 |     }
 145 | 
 146 |     interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
 147 |         type: T;
 148 |         props: P;
 149 |         key: Key | null;
 150 |     }
 151 | 
 152 |     interface ReactComponentElement<
 153 |         T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
 154 |         P = Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, 'key' | 'ref'>>
 155 |     > extends ReactElement<P, Exclude<T, number>> { }
 156 | 
 157 |     /**
 158 |      * @deprecated Please use `FunctionComponentElement`
 159 |      */
 160 |     type SFCElement<P> = FunctionComponentElement<P>;
 161 | 
 162 |     interface FunctionComponentElement<P> extends ReactElement<P, FunctionComponent<P>> {
 163 |         ref?: ('ref' extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined;
 164 |     }
 165 | 
 166 |     type CElement<P, T extends Component<P, ComponentState>> = ComponentElement<P, T>;
 167 |     interface ComponentElement<P, T extends Component<P, ComponentState>> extends ReactElement<P, ComponentClass<P>> {
 168 |         ref?: LegacyRef<T> | undefined;
 169 |     }
 170 | 
 171 |     type ClassicElement<P> = CElement<P, ClassicComponent<P, ComponentState>>;
 172 | 
 173 |     // string fallback for custom web-components
 174 |     interface DOMElement<P extends HTMLAttributes<T> | SVGAttributes<T>, T extends Element> extends ReactElement<P, string> {
 175 |         ref: LegacyRef<T>;
 176 |     }
 177 | 
 178 |     // ReactHTML for ReactHTMLElement
 179 |     interface ReactHTMLElement<T extends HTMLElement> extends DetailedReactHTMLElement<AllHTMLAttributes<T>, T> { }
 180 | 
 181 |     interface DetailedReactHTMLElement<P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMElement<P, T> {
 182 |         type: keyof ReactHTML;
 183 |     }
 184 | 
 185 |     // ReactSVG for ReactSVGElement
 186 |     interface ReactSVGElement extends DOMElement<SVGAttributes<SVGElement>, SVGElement> {
 187 |         type: keyof ReactSVG;
 188 |     }
 189 | 
 190 |     interface ReactPortal extends ReactElement {
 191 |         key: Key | null;
 192 |         children: ReactNode;
 193 |     }
 194 | 
 195 |     //
 196 |     // Factories
 197 |     // ----------------------------------------------------------------------
 198 | 
 199 |     type Factory<P> = (props?: Attributes & P, ...children: ReactNode[]) => ReactElement<P>;
 200 | 
 201 |     /**
 202 |      * @deprecated Please use `FunctionComponentFactory`
 203 |      */
 204 |     type SFCFactory<P> = FunctionComponentFactory<P>;
 205 | 
 206 |     type FunctionComponentFactory<P> = (props?: Attributes & P, ...children: ReactNode[]) => FunctionComponentElement<P>;
 207 | 
 208 |     type ComponentFactory<P, T extends Component<P, ComponentState>> =
 209 |         (props?: ClassAttributes<T> & P, ...children: ReactNode[]) => CElement<P, T>;
 210 | 
 211 |     type CFactory<P, T extends Component<P, ComponentState>> = ComponentFactory<P, T>;
 212 |     type ClassicFactory<P> = CFactory<P, ClassicComponent<P, ComponentState>>;
 213 | 
 214 |     type DOMFactory<P extends DOMAttributes<T>, T extends Element> =
 215 |         (props?: ClassAttributes<T> & P | null, ...children: ReactNode[]) => DOMElement<P, T>;
 216 | 
 217 |     interface HTMLFactory<T extends HTMLElement> extends DetailedHTMLFactory<AllHTMLAttributes<T>, T> {}
 218 | 
 219 |     interface DetailedHTMLFactory<P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMFactory<P, T> {
 220 |         (props?: ClassAttributes<T> & P | null, ...children: ReactNode[]): DetailedReactHTMLElement<P, T>;
 221 |     }
 222 | 
 223 |     interface SVGFactory extends DOMFactory<SVGAttributes<SVGElement>, SVGElement> {
 224 |         (props?: ClassAttributes<SVGElement> & SVGAttributes<SVGElement> | null, ...children: ReactNode[]): ReactSVGElement;
 225 |     }
 226 | 
 227 |     //
 228 |     // React Nodes
 229 |     // http://facebook.github.io/react/docs/glossary.html
 230 |     // ----------------------------------------------------------------------
 231 | 
 232 |     type ReactText = string | number;
 233 |     type ReactChild = ReactElement | ReactText;
 234 | 
 235 |     interface ReactNodeArray extends Array<ReactNode> {}
 236 |     type ReactFragment = {} | ReactNodeArray;
 237 |     type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
 238 | 
 239 |     //
 240 |     // Top Level API
 241 |     // ----------------------------------------------------------------------
 242 | 
 243 |     // DOM Elements
 244 |     function createFactory<T extends HTMLElement>(
 245 |         type: keyof ReactHTML): HTMLFactory<T>;
 246 |     function createFactory(
 247 |         type: keyof ReactSVG): SVGFactory;
 248 |     function createFactory<P extends DOMAttributes<T>, T extends Element>(
 249 |         type: string): DOMFactory<P, T>;
 250 | 
 251 |     // Custom components
 252 |     function createFactory<P>(type: FunctionComponent<P>): FunctionComponentFactory<P>;
 253 |     function createFactory<P>(
 254 |         type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>): CFactory<P, ClassicComponent<P, ComponentState>>;
 255 |     function createFactory<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
 256 |         type: ClassType<P, T, C>): CFactory<P, T>;
 257 |     function createFactory<P>(type: ComponentClass<P>): Factory<P>;
 258 | 
 259 |     // DOM Elements
 260 |     // TODO: generalize this to everything in `keyof ReactHTML`, not just "input"
 261 |     function createElement(
 262 |         type: "input",
 263 |         props?: InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement> | null,
 264 |         ...children: ReactNode[]): DetailedReactHTMLElement<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 265 |     function createElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
 266 |         type: keyof ReactHTML,
 267 |         props?: ClassAttributes<T> & P | null,
 268 |         ...children: ReactNode[]): DetailedReactHTMLElement<P, T>;
 269 |     function createElement<P extends SVGAttributes<T>, T extends SVGElement>(
 270 |         type: keyof ReactSVG,
 271 |         props?: ClassAttributes<T> & P | null,
 272 |         ...children: ReactNode[]): ReactSVGElement;
 273 |     function createElement<P extends DOMAttributes<T>, T extends Element>(
 274 |         type: string,
 275 |         props?: ClassAttributes<T> & P | null,
 276 |         ...children: ReactNode[]): DOMElement<P, T>;
 277 | 
 278 |     // Custom components
 279 | 
 280 |     function createElement<P extends {}>(
 281 |         type: FunctionComponent<P>,
 282 |         props?: Attributes & P | null,
 283 |         ...children: ReactNode[]): FunctionComponentElement<P>;
 284 |     function createElement<P extends {}>(
 285 |         type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>,
 286 |         props?: ClassAttributes<ClassicComponent<P, ComponentState>> & P | null,
 287 |         ...children: ReactNode[]): CElement<P, ClassicComponent<P, ComponentState>>;
 288 |     function createElement<P extends {}, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
 289 |         type: ClassType<P, T, C>,
 290 |         props?: ClassAttributes<T> & P | null,
 291 |         ...children: ReactNode[]): CElement<P, T>;
 292 |     function createElement<P extends {}>(
 293 |         type: FunctionComponent<P> | ComponentClass<P> | string,
 294 |         props?: Attributes & P | null,
 295 |         ...children: ReactNode[]): ReactElement<P>;
 296 | 
 297 |     // DOM Elements
 298 |     // ReactHTMLElement
 299 |     function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
 300 |         element: DetailedReactHTMLElement<P, T>,
 301 |         props?: P,
 302 |         ...children: ReactNode[]): DetailedReactHTMLElement<P, T>;
 303 |     // ReactHTMLElement, less specific
 304 |     function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
 305 |         element: ReactHTMLElement<T>,
 306 |         props?: P,
 307 |         ...children: ReactNode[]): ReactHTMLElement<T>;
 308 |     // SVGElement
 309 |     function cloneElement<P extends SVGAttributes<T>, T extends SVGElement>(
 310 |         element: ReactSVGElement,
 311 |         props?: P,
 312 |         ...children: ReactNode[]): ReactSVGElement;
 313 |     // DOM Element (has to be the last, because type checking stops at first overload that fits)
 314 |     function cloneElement<P extends DOMAttributes<T>, T extends Element>(
 315 |         element: DOMElement<P, T>,
 316 |         props?: DOMAttributes<T> & P,
 317 |         ...children: ReactNode[]): DOMElement<P, T>;
 318 | 
 319 |     // Custom components
 320 |     function cloneElement<P>(
 321 |         element: FunctionComponentElement<P>,
 322 |         props?: Partial<P> & Attributes,
 323 |         ...children: ReactNode[]): FunctionComponentElement<P>;
 324 |     function cloneElement<P, T extends Component<P, ComponentState>>(
 325 |         element: CElement<P, T>,
 326 |         props?: Partial<P> & ClassAttributes<T>,
 327 |         ...children: ReactNode[]): CElement<P, T>;
 328 |     function cloneElement<P>(
 329 |         element: ReactElement<P>,
 330 |         props?: Partial<P> & Attributes,
 331 |         ...children: ReactNode[]): ReactElement<P>;
 332 | 
 333 |     // Context via RenderProps
 334 |     interface ProviderProps<T> {
 335 |         value: T;
 336 |         children?: ReactNode | undefined;
 337 |     }
 338 | 
 339 |     interface ConsumerProps<T> {
 340 |         children: (value: T) => ReactNode;
 341 |     }
 342 | 
 343 |     // TODO: similar to how Fragment is actually a symbol, the values returned from createContext,
 344 |     // forwardRef and memo are actually objects that are treated specially by the renderer; see:
 345 |     // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/ReactContext.js#L35-L48
 346 |     // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/forwardRef.js#L42-L45
 347 |     // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/memo.js#L27-L31
 348 |     // However, we have no way of telling the JSX parser that it's a JSX element type or its props other than
 349 |     // by pretending to be a normal component.
 350 |     //
 351 |     // We don't just use ComponentType or SFC types because you are not supposed to attach statics to this
 352 |     // object, but rather to the original function.
 353 |     interface ExoticComponent<P = {}> {
 354 |         /**
 355 |          * **NOTE**: Exotic components are not callable.
 356 |          */
 357 |         (props: P): (ReactElement|null);
 358 |         readonly $$typeof: symbol;
 359 |     }
 360 | 
 361 |     interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
 362 |         displayName?: string | undefined;
 363 |     }
 364 | 
 365 |     interface ProviderExoticComponent<P> extends ExoticComponent<P> {
 366 |         propTypes?: WeakValidationMap<P> | undefined;
 367 |     }
 368 | 
 369 |     type ContextType<C extends Context<any>> = C extends Context<infer T> ? T : never;
 370 | 
 371 |     // NOTE: only the Context object itself can get a displayName
 372 |     // https://github.com/facebook/react-devtools/blob/e0b854e4c/backend/attachRendererFiber.js#L310-L325
 373 |     type Provider<T> = ProviderExoticComponent<ProviderProps<T>>;
 374 |     type Consumer<T> = ExoticComponent<ConsumerProps<T>>;
 375 |     interface Context<T> {
 376 |         Provider: Provider<T>;
 377 |         Consumer: Consumer<T>;
 378 |         displayName?: string | undefined;
 379 |     }
 380 |     function createContext<T>(
 381 |         // If you thought this should be optional, see
 382 |         // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106
 383 |         defaultValue: T,
 384 |     ): Context<T>;
 385 | 
 386 |     function isValidElement<P>(object: {} | null | undefined): object is ReactElement<P>;
 387 | 
 388 |     const Children: ReactChildren;
 389 |     const Fragment: ExoticComponent<{ children?: ReactNode | undefined }>;
 390 |     const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>;
 391 | 
 392 |     interface SuspenseProps {
 393 |         children?: ReactNode | undefined;
 394 | 
 395 |         /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */
 396 |         fallback: NonNullable<ReactNode>|null;
 397 |     }
 398 |     /**
 399 |      * This feature is not yet available for server-side rendering.
 400 |      * Suspense support will be added in a later release.
 401 |      */
 402 |     const Suspense: ExoticComponent<SuspenseProps>;
 403 |     const version: string;
 404 | 
 405 |     /**
 406 |      * {@link https://reactjs.org/docs/profiler.html#onrender-callback Profiler API}
 407 |      */
 408 |     type ProfilerOnRenderCallback = (
 409 |         id: string,
 410 |         phase: "mount" | "update",
 411 |         actualDuration: number,
 412 |         baseDuration: number,
 413 |         startTime: number,
 414 |         commitTime: number,
 415 |         interactions: Set<SchedulerInteraction>,
 416 |     ) => void;
 417 |     interface ProfilerProps {
 418 |         children?: ReactNode | undefined;
 419 |         id: string;
 420 |         onRender: ProfilerOnRenderCallback;
 421 |     }
 422 | 
 423 |     const Profiler: ExoticComponent<ProfilerProps>;
 424 | 
 425 |     //
 426 |     // Component API
 427 |     // ----------------------------------------------------------------------
 428 | 
 429 |     type ReactInstance = Component<any> | Element;
 430 | 
 431 |     // Base component for plain JS classes
 432 |     interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> { }
 433 |     class Component<P, S> {
 434 |         // tslint won't let me format the sample code in a way that vscode likes it :(
 435 |         /**
 436 |          * If set, `this.context` will be set at runtime to the current value of the given Context.
 437 |          *
 438 |          * Usage:
 439 |          *
 440 |          * ```ts
 441 |          * type MyContext = number
 442 |          * const Ctx = React.createContext<MyContext>(0)
 443 |          *
 444 |          * class Foo extends React.Component {
 445 |          *   static contextType = Ctx
 446 |          *   context!: React.ContextType<typeof Ctx>
 447 |          *   render () {
 448 |          *     return <>My context's value: {this.context}</>;
 449 |          *   }
 450 |          * }
 451 |          * ```
 452 |          *
 453 |          * @see https://reactjs.org/docs/context.html#classcontexttype
 454 |          */
 455 |         static contextType?: Context<any> | undefined;
 456 | 
 457 |         /**
 458 |          * If using the new style context, re-declare this in your class to be the
 459 |          * `React.ContextType` of your `static contextType`.
 460 |          * Should be used with type annotation or static contextType.
 461 |          *
 462 |          * ```ts
 463 |          * static contextType = MyContext
 464 |          * // For TS pre-3.7:
 465 |          * context!: React.ContextType<typeof MyContext>
 466 |          * // For TS 3.7 and above:
 467 |          * declare context: React.ContextType<typeof MyContext>
 468 |          * ```
 469 |          *
 470 |          * @see https://reactjs.org/docs/context.html
 471 |          */
 472 |         // TODO (TypeScript 3.0): unknown
 473 |         context: any;
 474 | 
 475 |         constructor(props: Readonly<P> | P);
 476 |         /**
 477 |          * @deprecated
 478 |          * @see https://reactjs.org/docs/legacy-context.html
 479 |          */
 480 |         constructor(props: P, context: any);
 481 | 
 482 |         // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
 483 |         // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
 484 |         // Also, the ` | S` allows intellisense to not be dumbisense
 485 |         setState<K extends keyof S>(
 486 |             state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
 487 |             callback?: () => void
 488 |         ): void;
 489 | 
 490 |         forceUpdate(callback?: () => void): void;
 491 |         render(): ReactNode;
 492 | 
 493 |         // React.Props<T> is now deprecated, which means that the `children`
 494 |         // property is not available on `P` by default, even though you can
 495 |         // always pass children as variadic arguments to `createElement`.
 496 |         // In the future, if we can define its call signature conditionally
 497 |         // on the existence of `children` in `P`, then we should remove this.
 498 |         readonly props: Readonly<P> & Readonly<{ children?: ReactNode | undefined }>;
 499 |         state: Readonly<S>;
 500 |         /**
 501 |          * @deprecated
 502 |          * https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
 503 |          */
 504 |         refs: {
 505 |             [key: string]: ReactInstance
 506 |         };
 507 |     }
 508 | 
 509 |     class PureComponent<P = {}, S = {}, SS = any> extends Component<P, S, SS> { }
 510 | 
 511 |     interface ClassicComponent<P = {}, S = {}> extends Component<P, S> {
 512 |         replaceState(nextState: S, callback?: () => void): void;
 513 |         isMounted(): boolean;
 514 |         getInitialState?(): S;
 515 |     }
 516 | 
 517 |     interface ChildContextProvider<CC> {
 518 |         getChildContext(): CC;
 519 |     }
 520 | 
 521 |     //
 522 |     // Class Interfaces
 523 |     // ----------------------------------------------------------------------
 524 | 
 525 |     /**
 526 |      * @deprecated as of recent React versions, function components can no
 527 |      * longer be considered 'stateless'. Please use `FunctionComponent` instead.
 528 |      *
 529 |      * @see [React Hooks](https://reactjs.org/docs/hooks-intro.html)
 530 |      */
 531 |     type SFC<P = {}> = FunctionComponent<P>;
 532 | 
 533 |     /**
 534 |      * @deprecated as of recent React versions, function components can no
 535 |      * longer be considered 'stateless'. Please use `FunctionComponent` instead.
 536 |      *
 537 |      * @see [React Hooks](https://reactjs.org/docs/hooks-intro.html)
 538 |      */
 539 |     type StatelessComponent<P = {}> = FunctionComponent<P>;
 540 | 
 541 |     type FC<P = {}> = FunctionComponent<P>;
 542 | 
 543 |     interface FunctionComponent<P = {}> {
 544 |         (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
 545 |         propTypes?: WeakValidationMap<P> | undefined;
 546 |         contextTypes?: ValidationMap<any> | undefined;
 547 |         defaultProps?: Partial<P> | undefined;
 548 |         displayName?: string | undefined;
 549 |     }
 550 | 
 551 |     type VFC<P = {}> = VoidFunctionComponent<P>;
 552 | 
 553 |     interface VoidFunctionComponent<P = {}> {
 554 |         (props: P, context?: any): ReactElement<any, any> | null;
 555 |         propTypes?: WeakValidationMap<P> | undefined;
 556 |         contextTypes?: ValidationMap<any> | undefined;
 557 |         defaultProps?: Partial<P> | undefined;
 558 |         displayName?: string | undefined;
 559 |     }
 560 | 
 561 |     type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
 562 | 
 563 |     interface ForwardRefRenderFunction<T, P = {}> {
 564 |         (props: PropsWithChildren<P>, ref: ForwardedRef<T>): ReactElement | null;
 565 |         displayName?: string | undefined;
 566 |         // explicit rejected with `never` required due to
 567 |         // https://github.com/microsoft/TypeScript/issues/36826
 568 |         /**
 569 |          * defaultProps are not supported on render functions
 570 |          */
 571 |         defaultProps?: never | undefined;
 572 |         /**
 573 |          * propTypes are not supported on render functions
 574 |          */
 575 |         propTypes?: never | undefined;
 576 |     }
 577 | 
 578 |     /**
 579 |      * @deprecated Use ForwardRefRenderFunction. forwardRef doesn't accept a
 580 |      *             "real" component.
 581 |      */
 582 |     interface RefForwardingComponent <T, P = {}> extends ForwardRefRenderFunction<T, P> {}
 583 | 
 584 |     interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
 585 |         new (props: P, context?: any): Component<P, S>;
 586 |         propTypes?: WeakValidationMap<P> | undefined;
 587 |         contextType?: Context<any> | undefined;
 588 |         contextTypes?: ValidationMap<any> | undefined;
 589 |         childContextTypes?: ValidationMap<any> | undefined;
 590 |         defaultProps?: Partial<P> | undefined;
 591 |         displayName?: string | undefined;
 592 |     }
 593 | 
 594 |     interface ClassicComponentClass<P = {}> extends ComponentClass<P> {
 595 |         new (props: P, context?: any): ClassicComponent<P, ComponentState>;
 596 |         getDefaultProps?(): P;
 597 |     }
 598 | 
 599 |     /**
 600 |      * We use an intersection type to infer multiple type parameters from
 601 |      * a single argument, which is useful for many top-level API defs.
 602 |      * See https://github.com/Microsoft/TypeScript/issues/7234 for more info.
 603 |      */
 604 |     type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> =
 605 |         C &
 606 |         (new (props: P, context?: any) => T);
 607 | 
 608 |     //
 609 |     // Component Specs and Lifecycle
 610 |     // ----------------------------------------------------------------------
 611 | 
 612 |     // This should actually be something like `Lifecycle<P, S> | DeprecatedLifecycle<P, S>`,
 613 |     // as React will _not_ call the deprecated lifecycle methods if any of the new lifecycle
 614 |     // methods are present.
 615 |     interface ComponentLifecycle<P, S, SS = any> extends NewLifecycle<P, S, SS>, DeprecatedLifecycle<P, S> {
 616 |         /**
 617 |          * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
 618 |          */
 619 |         componentDidMount?(): void;
 620 |         /**
 621 |          * Called to determine whether the change in props and state should trigger a re-render.
 622 |          *
 623 |          * `Component` always returns true.
 624 |          * `PureComponent` implements a shallow comparison on props and state and returns true if any
 625 |          * props or states have changed.
 626 |          *
 627 |          * If false is returned, `Component#render`, `componentWillUpdate`
 628 |          * and `componentDidUpdate` will not be called.
 629 |          */
 630 |         shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
 631 |         /**
 632 |          * Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
 633 |          * cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.
 634 |          */
 635 |         componentWillUnmount?(): void;
 636 |         /**
 637 |          * Catches exceptions generated in descendant components. Unhandled exceptions will cause
 638 |          * the entire component tree to unmount.
 639 |          */
 640 |         componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;
 641 |     }
 642 | 
 643 |     // Unfortunately, we have no way of declaring that the component constructor must implement this
 644 |     interface StaticLifecycle<P, S> {
 645 |         getDerivedStateFromProps?: GetDerivedStateFromProps<P, S> | undefined;
 646 |         getDerivedStateFromError?: GetDerivedStateFromError<P, S> | undefined;
 647 |     }
 648 | 
 649 |     type GetDerivedStateFromProps<P, S> =
 650 |         /**
 651 |          * Returns an update to a component's state based on its new props and old state.
 652 |          *
 653 |          * Note: its presence prevents any of the deprecated lifecycle methods from being invoked
 654 |          */
 655 |         (nextProps: Readonly<P>, prevState: S) => Partial<S> | null;
 656 | 
 657 |     type GetDerivedStateFromError<P, S> =
 658 |         /**
 659 |          * This lifecycle is invoked after an error has been thrown by a descendant component.
 660 |          * It receives the error that was thrown as a parameter and should return a value to update state.
 661 |          *
 662 |          * Note: its presence prevents any of the deprecated lifecycle methods from being invoked
 663 |          */
 664 |         (error: any) => Partial<S> | null;
 665 | 
 666 |     // This should be "infer SS" but can't use it yet
 667 |     interface NewLifecycle<P, S, SS> {
 668 |         /**
 669 |          * Runs before React applies the result of `render` to the document, and
 670 |          * returns an object to be given to componentDidUpdate. Useful for saving
 671 |          * things such as scroll position before `render` causes changes to it.
 672 |          *
 673 |          * Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated
 674 |          * lifecycle events from running.
 675 |          */
 676 |         getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>): SS | null;
 677 |         /**
 678 |          * Called immediately after updating occurs. Not called for the initial render.
 679 |          *
 680 |          * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
 681 |          */
 682 |         componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot?: SS): void;
 683 |     }
 684 | 
 685 |     interface DeprecatedLifecycle<P, S> {
 686 |         /**
 687 |          * Called immediately before mounting occurs, and before `Component#render`.
 688 |          * Avoid introducing any side-effects or subscriptions in this method.
 689 |          *
 690 |          * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
 691 |          * prevents this from being invoked.
 692 |          *
 693 |          * @deprecated 16.3, use componentDidMount or the constructor instead; will stop working in React 17
 694 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
 695 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
 696 |          */
 697 |         componentWillMount?(): void;
 698 |         /**
 699 |          * Called immediately before mounting occurs, and before `Component#render`.
 700 |          * Avoid introducing any side-effects or subscriptions in this method.
 701 |          *
 702 |          * This method will not stop working in React 17.
 703 |          *
 704 |          * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
 705 |          * prevents this from being invoked.
 706 |          *
 707 |          * @deprecated 16.3, use componentDidMount or the constructor instead
 708 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
 709 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
 710 |          */
 711 |         UNSAFE_componentWillMount?(): void;
 712 |         /**
 713 |          * Called when the component may be receiving new props.
 714 |          * React may call this even if props have not changed, so be sure to compare new and existing
 715 |          * props if you only want to handle changes.
 716 |          *
 717 |          * Calling `Component#setState` generally does not trigger this method.
 718 |          *
 719 |          * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
 720 |          * prevents this from being invoked.
 721 |          *
 722 |          * @deprecated 16.3, use static getDerivedStateFromProps instead; will stop working in React 17
 723 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
 724 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
 725 |          */
 726 |         componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
 727 |         /**
 728 |          * Called when the component may be receiving new props.
 729 |          * React may call this even if props have not changed, so be sure to compare new and existing
 730 |          * props if you only want to handle changes.
 731 |          *
 732 |          * Calling `Component#setState` generally does not trigger this method.
 733 |          *
 734 |          * This method will not stop working in React 17.
 735 |          *
 736 |          * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
 737 |          * prevents this from being invoked.
 738 |          *
 739 |          * @deprecated 16.3, use static getDerivedStateFromProps instead
 740 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
 741 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
 742 |          */
 743 |         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
 744 |         /**
 745 |          * Called immediately before rendering when new props or state is received. Not called for the initial render.
 746 |          *
 747 |          * Note: You cannot call `Component#setState` here.
 748 |          *
 749 |          * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
 750 |          * prevents this from being invoked.
 751 |          *
 752 |          * @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
 753 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
 754 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
 755 |          */
 756 |         componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
 757 |         /**
 758 |          * Called immediately before rendering when new props or state is received. Not called for the initial render.
 759 |          *
 760 |          * Note: You cannot call `Component#setState` here.
 761 |          *
 762 |          * This method will not stop working in React 17.
 763 |          *
 764 |          * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps
 765 |          * prevents this from being invoked.
 766 |          *
 767 |          * @deprecated 16.3, use getSnapshotBeforeUpdate instead
 768 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
 769 |          * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
 770 |          */
 771 |         UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
 772 |     }
 773 | 
 774 |     interface Mixin<P, S> extends ComponentLifecycle<P, S> {
 775 |         mixins?: Array<Mixin<P, S>> | undefined;
 776 |         statics?: {
 777 |             [key: string]: any;
 778 |         } | undefined;
 779 | 
 780 |         displayName?: string | undefined;
 781 |         propTypes?: ValidationMap<any> | undefined;
 782 |         contextTypes?: ValidationMap<any> | undefined;
 783 |         childContextTypes?: ValidationMap<any> | undefined;
 784 | 
 785 |         getDefaultProps?(): P;
 786 |         getInitialState?(): S;
 787 |     }
 788 | 
 789 |     interface ComponentSpec<P, S> extends Mixin<P, S> {
 790 |         render(): ReactNode;
 791 | 
 792 |         [propertyName: string]: any;
 793 |     }
 794 | 
 795 |     function createRef<T>(): RefObject<T>;
 796 | 
 797 |     // will show `ForwardRef(${Component.displayName || Component.name})` in devtools by default,
 798 |     // but can be given its own specific name
 799 |     interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {
 800 |         defaultProps?: Partial<P> | undefined;
 801 |         propTypes?: WeakValidationMap<P> | undefined;
 802 |     }
 803 | 
 804 |     function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
 805 | 
 806 |     /** Ensures that the props do not include ref at all */
 807 |     type PropsWithoutRef<P> =
 808 |         // Pick would not be sufficient for this. We'd like to avoid unnecessary mapping and need a distributive conditional to support unions.
 809 |         // see: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types
 810 |         // https://github.com/Microsoft/TypeScript/issues/28339
 811 |         P extends any ? ('ref' extends keyof P ? Pick<P, Exclude<keyof P, 'ref'>> : P) : P;
 812 |     /** Ensures that the props do not include string ref, which cannot be forwarded */
 813 |     type PropsWithRef<P> =
 814 |         // Just "P extends { ref?: infer R }" looks sufficient, but R will infer as {} if P is {}.
 815 |         'ref' extends keyof P
 816 |             ? P extends { ref?: infer R | undefined }
 817 |                 ? string extends R
 818 |                     ? PropsWithoutRef<P> & { ref?: Exclude<R, string> | undefined }
 819 |                     : P
 820 |                 : P
 821 |             : P;
 822 | 
 823 |     type PropsWithChildren<P> = P & { children?: ReactNode | undefined };
 824 | 
 825 |     /**
 826 |      * NOTE: prefer ComponentPropsWithRef, if the ref is forwarded,
 827 |      * or ComponentPropsWithoutRef when refs are not supported.
 828 |      */
 829 |     type ComponentProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> =
 830 |         T extends JSXElementConstructor<infer P>
 831 |             ? P
 832 |             : T extends keyof JSX.IntrinsicElements
 833 |                 ? JSX.IntrinsicElements[T]
 834 |                 : {};
 835 |     type ComponentPropsWithRef<T extends ElementType> =
 836 |         T extends ComponentClass<infer P>
 837 |             ? PropsWithoutRef<P> & RefAttributes<InstanceType<T>>
 838 |             : PropsWithRef<ComponentProps<T>>;
 839 |     type ComponentPropsWithoutRef<T extends ElementType> =
 840 |         PropsWithoutRef<ComponentProps<T>>;
 841 | 
 842 |     type ComponentRef<T extends ElementType> = T extends NamedExoticComponent<
 843 |         ComponentPropsWithoutRef<T> & RefAttributes<infer Method>
 844 |     >
 845 |         ? Method
 846 |         : ComponentPropsWithRef<T> extends RefAttributes<infer Method>
 847 |             ? Method
 848 |             : never;
 849 | 
 850 |     // will show `Memo(${Component.displayName || Component.name})` in devtools by default,
 851 |     // but can be given its own specific name
 852 |     type MemoExoticComponent<T extends ComponentType<any>> = NamedExoticComponent<ComponentPropsWithRef<T>> & {
 853 |         readonly type: T;
 854 |     };
 855 | 
 856 |     function memo<P extends object>(
 857 |         Component: SFC<P>,
 858 |         propsAreEqual?: (prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>>) => boolean
 859 |     ): NamedExoticComponent<P>;
 860 |     function memo<T extends ComponentType<any>>(
 861 |         Component: T,
 862 |         propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean
 863 |     ): MemoExoticComponent<T>;
 864 | 
 865 |     type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
 866 |         readonly _result: T;
 867 |     };
 868 | 
 869 |     function lazy<T extends ComponentType<any>>(
 870 |         factory: () => Promise<{ default: T }>
 871 |     ): LazyExoticComponent<T>;
 872 | 
 873 |     //
 874 |     // React Hooks
 875 |     // ----------------------------------------------------------------------
 876 | 
 877 |     // based on the code in https://github.com/facebook/react/pull/13968
 878 | 
 879 |     // Unlike the class component setState, the updates are not allowed to be partial
 880 |     type SetStateAction<S> = S | ((prevState: S) => S);
 881 |     // this technically does accept a second argument, but it's already under a deprecation warning
 882 |     // and it's not even released so probably better to not define it.
 883 |     type Dispatch<A> = (value: A) => void;
 884 |     // Since action _can_ be undefined, dispatch may be called without any parameters.
 885 |     type DispatchWithoutAction = () => void;
 886 |     // Unlike redux, the actions _can_ be anything
 887 |     type Reducer<S, A> = (prevState: S, action: A) => S;
 888 |     // If useReducer accepts a reducer without action, dispatch may be called without any parameters.
 889 |     type ReducerWithoutAction<S> = (prevState: S) => S;
 890 |     // types used to try and prevent the compiler from reducing S
 891 |     // to a supertype common with the second argument to useReducer()
 892 |     type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
 893 |     type ReducerAction<R extends Reducer<any, any>> = R extends Reducer<any, infer A> ? A : never;
 894 |     // The identity check is done with the SameValue algorithm (Object.is), which is stricter than ===
 895 |     type ReducerStateWithoutAction<R extends ReducerWithoutAction<any>> =
 896 |         R extends ReducerWithoutAction<infer S> ? S : never;
 897 |     // TODO (TypeScript 3.0): ReadonlyArray<unknown>
 898 |     type DependencyList = ReadonlyArray<any>;
 899 | 
 900 |     // NOTE: callbacks are _only_ allowed to return either void, or a destructor.
 901 |     type EffectCallback = () => (void | Destructor);
 902 | 
 903 |     interface MutableRefObject<T> {
 904 |         current: T;
 905 |     }
 906 | 
 907 |     // This will technically work if you give a Consumer<T> or Provider<T> but it's deprecated and warns
 908 |     /**
 909 |      * Accepts a context object (the value returned from `React.createContext`) and returns the current
 910 |      * context value, as given by the nearest context provider for the given context.
 911 |      *
 912 |      * @version 16.8.0
 913 |      * @see https://reactjs.org/docs/hooks-reference.html#usecontext
 914 |      */
 915 |     function useContext<T>(context: Context<T>/*, (not public API) observedBits?: number|boolean */): T;
 916 |     /**
 917 |      * Returns a stateful value, and a function to update it.
 918 |      *
 919 |      * @version 16.8.0
 920 |      * @see https://reactjs.org/docs/hooks-reference.html#usestate
 921 |      */
 922 |     function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
 923 |     // convenience overload when first argument is omitted
 924 |     /**
 925 |      * Returns a stateful value, and a function to update it.
 926 |      *
 927 |      * @version 16.8.0
 928 |      * @see https://reactjs.org/docs/hooks-reference.html#usestate
 929 |      */
 930 |     function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
 931 |     /**
 932 |      * An alternative to `useState`.
 933 |      *
 934 |      * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
 935 |      * multiple sub-values. It also lets you optimize performance for components that trigger deep
 936 |      * updates because you can pass `dispatch` down instead of callbacks.
 937 |      *
 938 |      * @version 16.8.0
 939 |      * @see https://reactjs.org/docs/hooks-reference.html#usereducer
 940 |      */
 941 |     // overload where dispatch could accept 0 arguments.
 942 |     function useReducer<R extends ReducerWithoutAction<any>, I>(
 943 |         reducer: R,
 944 |         initializerArg: I,
 945 |         initializer: (arg: I) => ReducerStateWithoutAction<R>
 946 |     ): [ReducerStateWithoutAction<R>, DispatchWithoutAction];
 947 |     /**
 948 |      * An alternative to `useState`.
 949 |      *
 950 |      * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
 951 |      * multiple sub-values. It also lets you optimize performance for components that trigger deep
 952 |      * updates because you can pass `dispatch` down instead of callbacks.
 953 |      *
 954 |      * @version 16.8.0
 955 |      * @see https://reactjs.org/docs/hooks-reference.html#usereducer
 956 |      */
 957 |     // overload where dispatch could accept 0 arguments.
 958 |     function useReducer<R extends ReducerWithoutAction<any>>(
 959 |         reducer: R,
 960 |         initializerArg: ReducerStateWithoutAction<R>,
 961 |         initializer?: undefined
 962 |     ): [ReducerStateWithoutAction<R>, DispatchWithoutAction];
 963 |     /**
 964 |      * An alternative to `useState`.
 965 |      *
 966 |      * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
 967 |      * multiple sub-values. It also lets you optimize performance for components that trigger deep
 968 |      * updates because you can pass `dispatch` down instead of callbacks.
 969 |      *
 970 |      * @version 16.8.0
 971 |      * @see https://reactjs.org/docs/hooks-reference.html#usereducer
 972 |      */
 973 |     // overload where "I" may be a subset of ReducerState<R>; used to provide autocompletion.
 974 |     // If "I" matches ReducerState<R> exactly then the last overload will allow initializer to be omitted.
 975 |     // the last overload effectively behaves as if the identity function (x => x) is the initializer.
 976 |     function useReducer<R extends Reducer<any, any>, I>(
 977 |         reducer: R,
 978 |         initializerArg: I & ReducerState<R>,
 979 |         initializer: (arg: I & ReducerState<R>) => ReducerState<R>
 980 |     ): [ReducerState<R>, Dispatch<ReducerAction<R>>];
 981 |     /**
 982 |      * An alternative to `useState`.
 983 |      *
 984 |      * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
 985 |      * multiple sub-values. It also lets you optimize performance for components that trigger deep
 986 |      * updates because you can pass `dispatch` down instead of callbacks.
 987 |      *
 988 |      * @version 16.8.0
 989 |      * @see https://reactjs.org/docs/hooks-reference.html#usereducer
 990 |      */
 991 |     // overload for free "I"; all goes as long as initializer converts it into "ReducerState<R>".
 992 |     function useReducer<R extends Reducer<any, any>, I>(
 993 |         reducer: R,
 994 |         initializerArg: I,
 995 |         initializer: (arg: I) => ReducerState<R>
 996 |     ): [ReducerState<R>, Dispatch<ReducerAction<R>>];
 997 |     /**
 998 |      * An alternative to `useState`.
 999 |      *
1000 |      * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
1001 |      * multiple sub-values. It also lets you optimize performance for components that trigger deep
1002 |      * updates because you can pass `dispatch` down instead of callbacks.
1003 |      *
1004 |      * @version 16.8.0
1005 |      * @see https://reactjs.org/docs/hooks-reference.html#usereducer
1006 |      */
1007 | 
1008 |     // I'm not sure if I keep this 2-ary or if I make it (2,3)-ary; it's currently (2,3)-ary.
1009 |     // The Flow types do have an overload for 3-ary invocation with undefined initializer.
1010 | 
1011 |     // NOTE: without the ReducerState indirection, TypeScript would reduce S to be the most common
1012 |     // supertype between the reducer's return type and the initialState (or the initializer's return type),
1013 |     // which would prevent autocompletion from ever working.
1014 | 
1015 |     // TODO: double-check if this weird overload logic is necessary. It is possible it's either a bug
1016 |     // in older versions, or a regression in newer versions of the typescript completion service.
1017 |     function useReducer<R extends Reducer<any, any>>(
1018 |         reducer: R,
1019 |         initialState: ReducerState<R>,
1020 |         initializer?: undefined
1021 |     ): [ReducerState<R>, Dispatch<ReducerAction<R>>];
1022 |     /**
1023 |      * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
1024 |      * (`initialValue`). The returned object will persist for the full lifetime of the component.
1025 |      *
1026 |      * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
1027 |      * value around similar to how you’d use instance fields in classes.
1028 |      *
1029 |      * @version 16.8.0
1030 |      * @see https://reactjs.org/docs/hooks-reference.html#useref
1031 |      */
1032 |     function useRef<T>(initialValue: T): MutableRefObject<T>;
1033 |     // convenience overload for refs given as a ref prop as they typically start with a null value
1034 |     /**
1035 |      * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
1036 |      * (`initialValue`). The returned object will persist for the full lifetime of the component.
1037 |      *
1038 |      * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
1039 |      * value around similar to how you’d use instance fields in classes.
1040 |      *
1041 |      * Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type
1042 |      * of the generic argument.
1043 |      *
1044 |      * @version 16.8.0
1045 |      * @see https://reactjs.org/docs/hooks-reference.html#useref
1046 |      */
1047 |     function useRef<T>(initialValue: T|null): RefObject<T>;
1048 |     // convenience overload for potentially undefined initialValue / call with 0 arguments
1049 |     // has a default to stop it from defaulting to {} instead
1050 |     /**
1051 |      * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
1052 |      * (`initialValue`). The returned object will persist for the full lifetime of the component.
1053 |      *
1054 |      * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
1055 |      * value around similar to how you’d use instance fields in classes.
1056 |      *
1057 |      * @version 16.8.0
1058 |      * @see https://reactjs.org/docs/hooks-reference.html#useref
1059 |      */
1060 |     function useRef<T = undefined>(): MutableRefObject<T | undefined>;
1061 |     /**
1062 |      * The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations.
1063 |      * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside
1064 |      * `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.
1065 |      *
1066 |      * Prefer the standard `useEffect` when possible to avoid blocking visual updates.
1067 |      *
1068 |      * If you’re migrating code from a class component, `useLayoutEffect` fires in the same phase as
1069 |      * `componentDidMount` and `componentDidUpdate`.
1070 |      *
1071 |      * @version 16.8.0
1072 |      * @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect
1073 |      */
1074 |     function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
1075 |     /**
1076 |      * Accepts a function that contains imperative, possibly effectful code.
1077 |      *
1078 |      * @param effect Imperative function that can return a cleanup function
1079 |      * @param deps If present, effect will only activate if the values in the list change.
1080 |      *
1081 |      * @version 16.8.0
1082 |      * @see https://reactjs.org/docs/hooks-reference.html#useeffect
1083 |      */
1084 |     function useEffect(effect: EffectCallback, deps?: DependencyList): void;
1085 |     // NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref<T>
1086 |     /**
1087 |      * `useImperativeHandle` customizes the instance value that is exposed to parent components when using
1088 |      * `ref`. As always, imperative code using refs should be avoided in most cases.
1089 |      *
1090 |      * `useImperativeHandle` should be used with `React.forwardRef`.
1091 |      *
1092 |      * @version 16.8.0
1093 |      * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle
1094 |      */
1095 |     function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;
1096 |     // I made 'inputs' required here and in useMemo as there's no point to memoizing without the memoization key
1097 |     // useCallback(X) is identical to just using X, useMemo(() => Y) is identical to just using Y.
1098 |     /**
1099 |      * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs`
1100 |      * has changed.
1101 |      *
1102 |      * @version 16.8.0
1103 |      * @see https://reactjs.org/docs/hooks-reference.html#usecallback
1104 |      */
1105 |     // TODO (TypeScript 3.0): <T extends (...args: never[]) => unknown>
1106 |     function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;
1107 |     /**
1108 |      * `useMemo` will only recompute the memoized value when one of the `deps` has changed.
1109 |      *
1110 |      * Usage note: if calling `useMemo` with a referentially stable function, also give it as the input in
1111 |      * the second argument.
1112 |      *
1113 |      * ```ts
1114 |      * function expensive () { ... }
1115 |      *
1116 |      * function Component () {
1117 |      *   const expensiveResult = useMemo(expensive, [expensive])
1118 |      *   return ...
1119 |      * }
1120 |      * ```
1121 |      *
1122 |      * @version 16.8.0
1123 |      * @see https://reactjs.org/docs/hooks-reference.html#usememo
1124 |      */
1125 |     // allow undefined, but don't make it optional as that is very likely a mistake
1126 |     function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;
1127 |     /**
1128 |      * `useDebugValue` can be used to display a label for custom hooks in React DevTools.
1129 |      *
1130 |      * NOTE: We don’t recommend adding debug values to every custom hook.
1131 |      * It’s most valuable for custom hooks that are part of shared libraries.
1132 |      *
1133 |      * @version 16.8.0
1134 |      * @see https://reactjs.org/docs/hooks-reference.html#usedebugvalue
1135 |      */
1136 |     // the name of the custom hook is itself derived from the function name at runtime:
1137 |     // it's just the function name without the "use" prefix.
1138 |     function useDebugValue<T>(value: T, format?: (value: T) => any): void;
1139 | 
1140 |     //
1141 |     // Event System
1142 |     // ----------------------------------------------------------------------
1143 |     // TODO: change any to unknown when moving to TS v3
1144 |     interface BaseSyntheticEvent<E = object, C = any, T = any> {
1145 |         nativeEvent: E;
1146 |         currentTarget: C;
1147 |         target: T;
1148 |         bubbles: boolean;
1149 |         cancelable: boolean;
1150 |         defaultPrevented: boolean;
1151 |         eventPhase: number;
1152 |         isTrusted: boolean;
1153 |         preventDefault(): void;
1154 |         isDefaultPrevented(): boolean;
1155 |         stopPropagation(): void;
1156 |         isPropagationStopped(): boolean;
1157 |         persist(): void;
1158 |         timeStamp: number;
1159 |         type: string;
1160 |     }
1161 | 
1162 |     /**
1163 |      * currentTarget - a reference to the element on which the event listener is registered.
1164 |      *
1165 |      * target - a reference to the element from which the event was originally dispatched.
1166 |      * This might be a child element to the element on which the event listener is registered.
1167 |      * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
1168 |      */
1169 |     interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}
1170 | 
1171 |     interface ClipboardEvent<T = Element> extends SyntheticEvent<T, NativeClipboardEvent> {
1172 |         clipboardData: DataTransfer;
1173 |     }
1174 | 
1175 |     interface CompositionEvent<T = Element> extends SyntheticEvent<T, NativeCompositionEvent> {
1176 |         data: string;
1177 |     }
1178 | 
1179 |     interface DragEvent<T = Element> extends MouseEvent<T, NativeDragEvent> {
1180 |         dataTransfer: DataTransfer;
1181 |     }
1182 | 
1183 |     interface PointerEvent<T = Element> extends MouseEvent<T, NativePointerEvent> {
1184 |         pointerId: number;
1185 |         pressure: number;
1186 |         tangentialPressure: number;
1187 |         tiltX: number;
1188 |         tiltY: number;
1189 |         twist: number;
1190 |         width: number;
1191 |         height: number;
1192 |         pointerType: 'mouse' | 'pen' | 'touch';
1193 |         isPrimary: boolean;
1194 |     }
1195 | 
1196 |     interface FocusEvent<T = Element> extends SyntheticEvent<T, NativeFocusEvent> {
1197 |         relatedTarget: EventTarget | null;
1198 |         target: EventTarget & T;
1199 |     }
1200 | 
1201 |     interface FormEvent<T = Element> extends SyntheticEvent<T> {
1202 |     }
1203 | 
1204 |     interface InvalidEvent<T = Element> extends SyntheticEvent<T> {
1205 |         target: EventTarget & T;
1206 |     }
1207 | 
1208 |     interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
1209 |         target: EventTarget & T;
1210 |     }
1211 | 
1212 |     interface KeyboardEvent<T = Element> extends SyntheticEvent<T, NativeKeyboardEvent> {
1213 |         altKey: boolean;
1214 |         /** @deprecated */
1215 |         charCode: number;
1216 |         ctrlKey: boolean;
1217 |         code: string;
1218 |         /**
1219 |          * 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.
1220 |          */
1221 |         getModifierState(key: string): boolean;
1222 |         /**
1223 |          * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
1224 |          */
1225 |         key: string;
1226 |         /** @deprecated */
1227 |         keyCode: number;
1228 |         locale: string;
1229 |         location: number;
1230 |         metaKey: boolean;
1231 |         repeat: boolean;
1232 |         shiftKey: boolean;
1233 |         /** @deprecated */
1234 |         which: number;
1235 |     }
1236 | 
1237 |     interface MouseEvent<T = Element, E = NativeMouseEvent> extends UIEvent<T, E> {
1238 |         altKey: boolean;
1239 |         button: number;
1240 |         buttons: number;
1241 |         clientX: number;
1242 |         clientY: number;
1243 |         ctrlKey: boolean;
1244 |         /**
1245 |          * 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.
1246 |          */
1247 |         getModifierState(key: string): boolean;
1248 |         metaKey: boolean;
1249 |         movementX: number;
1250 |         movementY: number;
1251 |         pageX: number;
1252 |         pageY: number;
1253 |         relatedTarget: EventTarget | null;
1254 |         screenX: number;
1255 |         screenY: number;
1256 |         shiftKey: boolean;
1257 |     }
1258 | 
1259 |     interface TouchEvent<T = Element> extends UIEvent<T, NativeTouchEvent> {
1260 |         altKey: boolean;
1261 |         changedTouches: TouchList;
1262 |         ctrlKey: boolean;
1263 |         /**
1264 |          * 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.
1265 |          */
1266 |         getModifierState(key: string): boolean;
1267 |         metaKey: boolean;
1268 |         shiftKey: boolean;
1269 |         targetTouches: TouchList;
1270 |         touches: TouchList;
1271 |     }
1272 | 
1273 |     interface UIEvent<T = Element, E = NativeUIEvent> extends SyntheticEvent<T, E> {
1274 |         detail: number;
1275 |         view: AbstractView;
1276 |     }
1277 | 
1278 |     interface WheelEvent<T = Element> extends MouseEvent<T, NativeWheelEvent> {
1279 |         deltaMode: number;
1280 |         deltaX: number;
1281 |         deltaY: number;
1282 |         deltaZ: number;
1283 |     }
1284 | 
1285 |     interface AnimationEvent<T = Element> extends SyntheticEvent<T, NativeAnimationEvent> {
1286 |         animationName: string;
1287 |         elapsedTime: number;
1288 |         pseudoElement: string;
1289 |     }
1290 | 
1291 |     interface TransitionEvent<T = Element> extends SyntheticEvent<T, NativeTransitionEvent> {
1292 |         elapsedTime: number;
1293 |         propertyName: string;
1294 |         pseudoElement: string;
1295 |     }
1296 | 
1297 |     //
1298 |     // Event Handler Types
1299 |     // ----------------------------------------------------------------------
1300 | 
1301 |     type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"];
1302 | 
1303 |     type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
1304 | 
1305 |     type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;
1306 |     type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;
1307 |     type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
1308 |     type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>;
1309 |     type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
1310 |     type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;
1311 |     type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;
1312 |     type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
1313 |     type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
1314 |     type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
1315 |     type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
1316 |     type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
1317 |     type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
1318 |     type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;
1319 | 
1320 |     //
1321 |     // Props / DOM Attributes
1322 |     // ----------------------------------------------------------------------
1323 | 
1324 |     /**
1325 |      * @deprecated. This was used to allow clients to pass `ref` and `key`
1326 |      * to `createElement`, which is no longer necessary due to intersection
1327 |      * types. If you need to declare a props object before passing it to
1328 |      * `createElement` or a factory, use `ClassAttributes<T>`:
1329 |      *
1330 |      * ```ts
1331 |      * var b: Button | null;
1332 |      * var props: ButtonProps & ClassAttributes<Button> = {
1333 |      *     ref: b => button = b, // ok!
1334 |      *     label: "I'm a Button"
1335 |      * };
1336 |      * ```
1337 |      */
1338 |     interface Props<T> {
1339 |         children?: ReactNode | undefined;
1340 |         key?: Key | undefined;
1341 |         ref?: LegacyRef<T> | undefined;
1342 |     }
1343 | 
1344 |     interface HTMLProps<T> extends AllHTMLAttributes<T>, ClassAttributes<T> {
1345 |     }
1346 | 
1347 |     type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E;
1348 | 
1349 |     interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T> {
1350 |     }
1351 | 
1352 |     interface DOMAttributes<T> {
1353 |         children?: ReactNode | undefined;
1354 |         dangerouslySetInnerHTML?: {
1355 |             __html: string;
1356 |         } | undefined;
1357 | 
1358 |         // Clipboard Events
1359 |         onCopy?: ClipboardEventHandler<T> | undefined;
1360 |         onCopyCapture?: ClipboardEventHandler<T> | undefined;
1361 |         onCut?: ClipboardEventHandler<T> | undefined;
1362 |         onCutCapture?: ClipboardEventHandler<T> | undefined;
1363 |         onPaste?: ClipboardEventHandler<T> | undefined;
1364 |         onPasteCapture?: ClipboardEventHandler<T> | undefined;
1365 | 
1366 |         // Composition Events
1367 |         onCompositionEnd?: CompositionEventHandler<T> | undefined;
1368 |         onCompositionEndCapture?: CompositionEventHandler<T> | undefined;
1369 |         onCompositionStart?: CompositionEventHandler<T> | undefined;
1370 |         onCompositionStartCapture?: CompositionEventHandler<T> | undefined;
1371 |         onCompositionUpdate?: CompositionEventHandler<T> | undefined;
1372 |         onCompositionUpdateCapture?: CompositionEventHandler<T> | undefined;
1373 | 
1374 |         // Focus Events
1375 |         onFocus?: FocusEventHandler<T> | undefined;
1376 |         onFocusCapture?: FocusEventHandler<T> | undefined;
1377 |         onBlur?: FocusEventHandler<T> | undefined;
1378 |         onBlurCapture?: FocusEventHandler<T> | undefined;
1379 | 
1380 |         // Form Events
1381 |         onChange?: FormEventHandler<T> | undefined;
1382 |         onChangeCapture?: FormEventHandler<T> | undefined;
1383 |         onBeforeInput?: FormEventHandler<T> | undefined;
1384 |         onBeforeInputCapture?: FormEventHandler<T> | undefined;
1385 |         onInput?: FormEventHandler<T> | undefined;
1386 |         onInputCapture?: FormEventHandler<T> | undefined;
1387 |         onReset?: FormEventHandler<T> | undefined;
1388 |         onResetCapture?: FormEventHandler<T> | undefined;
1389 |         onSubmit?: FormEventHandler<T> | undefined;
1390 |         onSubmitCapture?: FormEventHandler<T> | undefined;
1391 |         onInvalid?: FormEventHandler<T> | undefined;
1392 |         onInvalidCapture?: FormEventHandler<T> | undefined;
1393 | 
1394 |         // Image Events
1395 |         onLoad?: ReactEventHandler<T> | undefined;
1396 |         onLoadCapture?: ReactEventHandler<T> | undefined;
1397 |         onError?: ReactEventHandler<T> | undefined; // also a Media Event
1398 |         onErrorCapture?: ReactEventHandler<T> | undefined; // also a Media Event
1399 | 
1400 |         // Keyboard Events
1401 |         onKeyDown?: KeyboardEventHandler<T> | undefined;
1402 |         onKeyDownCapture?: KeyboardEventHandler<T> | undefined;
1403 |         onKeyPress?: KeyboardEventHandler<T> | undefined;
1404 |         onKeyPressCapture?: KeyboardEventHandler<T> | undefined;
1405 |         onKeyUp?: KeyboardEventHandler<T> | undefined;
1406 |         onKeyUpCapture?: KeyboardEventHandler<T> | undefined;
1407 | 
1408 |         // Media Events
1409 |         onAbort?: ReactEventHandler<T> | undefined;
1410 |         onAbortCapture?: ReactEventHandler<T> | undefined;
1411 |         onCanPlay?: ReactEventHandler<T> | undefined;
1412 |         onCanPlayCapture?: ReactEventHandler<T> | undefined;
1413 |         onCanPlayThrough?: ReactEventHandler<T> | undefined;
1414 |         onCanPlayThroughCapture?: ReactEventHandler<T> | undefined;
1415 |         onDurationChange?: ReactEventHandler<T> | undefined;
1416 |         onDurationChangeCapture?: ReactEventHandler<T> | undefined;
1417 |         onEmptied?: ReactEventHandler<T> | undefined;
1418 |         onEmptiedCapture?: ReactEventHandler<T> | undefined;
1419 |         onEncrypted?: ReactEventHandler<T> | undefined;
1420 |         onEncryptedCapture?: ReactEventHandler<T> | undefined;
1421 |         onEnded?: ReactEventHandler<T> | undefined;
1422 |         onEndedCapture?: ReactEventHandler<T> | undefined;
1423 |         onLoadedData?: ReactEventHandler<T> | undefined;
1424 |         onLoadedDataCapture?: ReactEventHandler<T> | undefined;
1425 |         onLoadedMetadata?: ReactEventHandler<T> | undefined;
1426 |         onLoadedMetadataCapture?: ReactEventHandler<T> | undefined;
1427 |         onLoadStart?: ReactEventHandler<T> | undefined;
1428 |         onLoadStartCapture?: ReactEventHandler<T> | undefined;
1429 |         onPause?: ReactEventHandler<T> | undefined;
1430 |         onPauseCapture?: ReactEventHandler<T> | undefined;
1431 |         onPlay?: ReactEventHandler<T> | undefined;
1432 |         onPlayCapture?: ReactEventHandler<T> | undefined;
1433 |         onPlaying?: ReactEventHandler<T> | undefined;
1434 |         onPlayingCapture?: ReactEventHandler<T> | undefined;
1435 |         onProgress?: ReactEventHandler<T> | undefined;
1436 |         onProgressCapture?: ReactEventHandler<T> | undefined;
1437 |         onRateChange?: ReactEventHandler<T> | undefined;
1438 |         onRateChangeCapture?: ReactEventHandler<T> | undefined;
1439 |         onSeeked?: ReactEventHandler<T> | undefined;
1440 |         onSeekedCapture?: ReactEventHandler<T> | undefined;
1441 |         onSeeking?: ReactEventHandler<T> | undefined;
1442 |         onSeekingCapture?: ReactEventHandler<T> | undefined;
1443 |         onStalled?: ReactEventHandler<T> | undefined;
1444 |         onStalledCapture?: ReactEventHandler<T> | undefined;
1445 |         onSuspend?: ReactEventHandler<T> | undefined;
1446 |         onSuspendCapture?: ReactEventHandler<T> | undefined;
1447 |         onTimeUpdate?: ReactEventHandler<T> | undefined;
1448 |         onTimeUpdateCapture?: ReactEventHandler<T> | undefined;
1449 |         onVolumeChange?: ReactEventHandler<T> | undefined;
1450 |         onVolumeChangeCapture?: ReactEventHandler<T> | undefined;
1451 |         onWaiting?: ReactEventHandler<T> | undefined;
1452 |         onWaitingCapture?: ReactEventHandler<T> | undefined;
1453 | 
1454 |         // MouseEvents
1455 |         onAuxClick?: MouseEventHandler<T> | undefined;
1456 |         onAuxClickCapture?: MouseEventHandler<T> | undefined;
1457 |         onClick?: MouseEventHandler<T> | undefined;
1458 |         onClickCapture?: MouseEventHandler<T> | undefined;
1459 |         onContextMenu?: MouseEventHandler<T> | undefined;
1460 |         onContextMenuCapture?: MouseEventHandler<T> | undefined;
1461 |         onDoubleClick?: MouseEventHandler<T> | undefined;
1462 |         onDoubleClickCapture?: MouseEventHandler<T> | undefined;
1463 |         onDrag?: DragEventHandler<T> | undefined;
1464 |         onDragCapture?: DragEventHandler<T> | undefined;
1465 |         onDragEnd?: DragEventHandler<T> | undefined;
1466 |         onDragEndCapture?: DragEventHandler<T> | undefined;
1467 |         onDragEnter?: DragEventHandler<T> | undefined;
1468 |         onDragEnterCapture?: DragEventHandler<T> | undefined;
1469 |         onDragExit?: DragEventHandler<T> | undefined;
1470 |         onDragExitCapture?: DragEventHandler<T> | undefined;
1471 |         onDragLeave?: DragEventHandler<T> | undefined;
1472 |         onDragLeaveCapture?: DragEventHandler<T> | undefined;
1473 |         onDragOver?: DragEventHandler<T> | undefined;
1474 |         onDragOverCapture?: DragEventHandler<T> | undefined;
1475 |         onDragStart?: DragEventHandler<T> | undefined;
1476 |         onDragStartCapture?: DragEventHandler<T> | undefined;
1477 |         onDrop?: DragEventHandler<T> | undefined;
1478 |         onDropCapture?: DragEventHandler<T> | undefined;
1479 |         onMouseDown?: MouseEventHandler<T> | undefined;
1480 |         onMouseDownCapture?: MouseEventHandler<T> | undefined;
1481 |         onMouseEnter?: MouseEventHandler<T> | undefined;
1482 |         onMouseLeave?: MouseEventHandler<T> | undefined;
1483 |         onMouseMove?: MouseEventHandler<T> | undefined;
1484 |         onMouseMoveCapture?: MouseEventHandler<T> | undefined;
1485 |         onMouseOut?: MouseEventHandler<T> | undefined;
1486 |         onMouseOutCapture?: MouseEventHandler<T> | undefined;
1487 |         onMouseOver?: MouseEventHandler<T> | undefined;
1488 |         onMouseOverCapture?: MouseEventHandler<T> | undefined;
1489 |         onMouseUp?: MouseEventHandler<T> | undefined;
1490 |         onMouseUpCapture?: MouseEventHandler<T> | undefined;
1491 | 
1492 |         // Selection Events
1493 |         onSelect?: ReactEventHandler<T> | undefined;
1494 |         onSelectCapture?: ReactEventHandler<T> | undefined;
1495 | 
1496 |         // Touch Events
1497 |         onTouchCancel?: TouchEventHandler<T> | undefined;
1498 |         onTouchCancelCapture?: TouchEventHandler<T> | undefined;
1499 |         onTouchEnd?: TouchEventHandler<T> | undefined;
1500 |         onTouchEndCapture?: TouchEventHandler<T> | undefined;
1501 |         onTouchMove?: TouchEventHandler<T> | undefined;
1502 |         onTouchMoveCapture?: TouchEventHandler<T> | undefined;
1503 |         onTouchStart?: TouchEventHandler<T> | undefined;
1504 |         onTouchStartCapture?: TouchEventHandler<T> | undefined;
1505 | 
1506 |         // Pointer Events
1507 |         onPointerDown?: PointerEventHandler<T> | undefined;
1508 |         onPointerDownCapture?: PointerEventHandler<T> | undefined;
1509 |         onPointerMove?: PointerEventHandler<T> | undefined;
1510 |         onPointerMoveCapture?: PointerEventHandler<T> | undefined;
1511 |         onPointerUp?: PointerEventHandler<T> | undefined;
1512 |         onPointerUpCapture?: PointerEventHandler<T> | undefined;
1513 |         onPointerCancel?: PointerEventHandler<T> | undefined;
1514 |         onPointerCancelCapture?: PointerEventHandler<T> | undefined;
1515 |         onPointerEnter?: PointerEventHandler<T> | undefined;
1516 |         onPointerEnterCapture?: PointerEventHandler<T> | undefined;
1517 |         onPointerLeave?: PointerEventHandler<T> | undefined;
1518 |         onPointerLeaveCapture?: PointerEventHandler<T> | undefined;
1519 |         onPointerOver?: PointerEventHandler<T> | undefined;
1520 |         onPointerOverCapture?: PointerEventHandler<T> | undefined;
1521 |         onPointerOut?: PointerEventHandler<T> | undefined;
1522 |         onPointerOutCapture?: PointerEventHandler<T> | undefined;
1523 |         onGotPointerCapture?: PointerEventHandler<T> | undefined;
1524 |         onGotPointerCaptureCapture?: PointerEventHandler<T> | undefined;
1525 |         onLostPointerCapture?: PointerEventHandler<T> | undefined;
1526 |         onLostPointerCaptureCapture?: PointerEventHandler<T> | undefined;
1527 | 
1528 |         // UI Events
1529 |         onScroll?: UIEventHandler<T> | undefined;
1530 |         onScrollCapture?: UIEventHandler<T> | undefined;
1531 | 
1532 |         // Wheel Events
1533 |         onWheel?: WheelEventHandler<T> | undefined;
1534 |         onWheelCapture?: WheelEventHandler<T> | undefined;
1535 | 
1536 |         // Animation Events
1537 |         onAnimationStart?: AnimationEventHandler<T> | undefined;
1538 |         onAnimationStartCapture?: AnimationEventHandler<T> | undefined;
1539 |         onAnimationEnd?: AnimationEventHandler<T> | undefined;
1540 |         onAnimationEndCapture?: AnimationEventHandler<T> | undefined;
1541 |         onAnimationIteration?: AnimationEventHandler<T> | undefined;
1542 |         onAnimationIterationCapture?: AnimationEventHandler<T> | undefined;
1543 | 
1544 |         // Transition Events
1545 |         onTransitionEnd?: TransitionEventHandler<T> | undefined;
1546 |         onTransitionEndCapture?: TransitionEventHandler<T> | undefined;
1547 |     }
1548 | 
1549 |     export interface CSSProperties extends CSS.Properties<string | number> {
1550 |         /**
1551 |          * The index signature was removed to enable closed typing for style
1552 |          * using CSSType. You're able to use type assertion or module augmentation
1553 |          * to add properties or an index signature of your own.
1554 |          *
1555 |          * For examples and more information, visit:
1556 |          * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
1557 |          */
1558 |     }
1559 | 
1560 |     // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
1561 |     interface AriaAttributes {
1562 |         /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
1563 |         'aria-activedescendant'?: string | undefined;
1564 |         /** 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. */
1565 |         'aria-atomic'?: Booleanish | undefined;
1566 |         /**
1567 |          * 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
1568 |          * presented if they are made.
1569 |          */
1570 |         'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined;
1571 |         /** 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. */
1572 |         'aria-busy'?: Booleanish | undefined;
1573 |         /**
1574 |          * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
1575 |          * @see aria-pressed @see aria-selected.
1576 |          */
1577 |         'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined;
1578 |         /**
1579 |          * Defines the total number of columns in a table, grid, or treegrid.
1580 |          * @see aria-colindex.
1581 |          */
1582 |         'aria-colcount'?: number | undefined;
1583 |         /**
1584 |          * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
1585 |          * @see aria-colcount @see aria-colspan.
1586 |          */
1587 |         'aria-colindex'?: number | undefined;
1588 |         /**
1589 |          * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
1590 |          * @see aria-colindex @see aria-rowspan.
1591 |          */
1592 |         'aria-colspan'?: number | undefined;
1593 |         /**
1594 |          * Identifies the element (or elements) whose contents or presence are controlled by the current element.
1595 |          * @see aria-owns.
1596 |          */
1597 |         'aria-controls'?: string | undefined;
1598 |         /** Indicates the element that represents the current item within a container or set of related elements. */
1599 |         'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' | undefined;
1600 |         /**
1601 |          * Identifies the element (or elements) that describes the object.
1602 |          * @see aria-labelledby
1603 |          */
1604 |         'aria-describedby'?: string | undefined;
1605 |         /**
1606 |          * Identifies the element that provides a detailed, extended description for the object.
1607 |          * @see aria-describedby.
1608 |          */
1609 |         'aria-details'?: string | undefined;
1610 |         /**
1611 |          * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
1612 |          * @see aria-hidden @see aria-readonly.
1613 |          */
1614 |         'aria-disabled'?: Booleanish | undefined;
1615 |         /**
1616 |          * Indicates what functions can be performed when a dragged object is released on the drop target.
1617 |          * @deprecated in ARIA 1.1
1618 |          */
1619 |         'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined;
1620 |         /**
1621 |          * Identifies the element that provides an error message for the object.
1622 |          * @see aria-invalid @see aria-describedby.
1623 |          */
1624 |         'aria-errormessage'?: string | undefined;
1625 |         /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
1626 |         'aria-expanded'?: Booleanish | undefined;
1627 |         /**
1628 |          * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
1629 |          * allows assistive technology to override the general default of reading in document source order.
1630 |          */
1631 |         'aria-flowto'?: string | undefined;
1632 |         /**
1633 |          * Indicates an element's "grabbed" state in a drag-and-drop operation.
1634 |          * @deprecated in ARIA 1.1
1635 |          */
1636 |         'aria-grabbed'?: Booleanish | undefined;
1637 |         /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
1638 |         'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined;
1639 |         /**
1640 |          * Indicates whether the element is exposed to an accessibility API.
1641 |          * @see aria-disabled.
1642 |          */
1643 |         'aria-hidden'?: Booleanish | undefined;
1644 |         /**
1645 |          * Indicates the entered value does not conform to the format expected by the application.
1646 |          * @see aria-errormessage.
1647 |          */
1648 |         'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined;
1649 |         /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
1650 |         'aria-keyshortcuts'?: string | undefined;
1651 |         /**
1652 |          * Defines a string value that labels the current element.
1653 |          * @see aria-labelledby.
1654 |          */
1655 |         'aria-label'?: string | undefined;
1656 |         /**
1657 |          * Identifies the element (or elements) that labels the current element.
1658 |          * @see aria-describedby.
1659 |          */
1660 |         'aria-labelledby'?: string | undefined;
1661 |         /** Defines the hierarchical level of an element within a structure. */
1662 |         'aria-level'?: number | undefined;
1663 |         /** 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. */
1664 |         'aria-live'?: 'off' | 'assertive' | 'polite' | undefined;
1665 |         /** Indicates whether an element is modal when displayed. */
1666 |         'aria-modal'?: Booleanish | undefined;
1667 |         /** Indicates whether a text box accepts multiple lines of input or only a single line. */
1668 |         'aria-multiline'?: Booleanish | undefined;
1669 |         /** Indicates that the user may select more than one item from the current selectable descendants. */
1670 |         'aria-multiselectable'?: Booleanish | undefined;
1671 |         /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
1672 |         'aria-orientation'?: 'horizontal' | 'vertical' | undefined;
1673 |         /**
1674 |          * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
1675 |          * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
1676 |          * @see aria-controls.
1677 |          */
1678 |         'aria-owns'?: string | undefined;
1679 |         /**
1680 |          * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
1681 |          * A hint could be a sample value or a brief description of the expected format.
1682 |          */
1683 |         'aria-placeholder'?: string | undefined;
1684 |         /**
1685 |          * 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.
1686 |          * @see aria-setsize.
1687 |          */
1688 |         'aria-posinset'?: number | undefined;
1689 |         /**
1690 |          * Indicates the current "pressed" state of toggle buttons.
1691 |          * @see aria-checked @see aria-selected.
1692 |          */
1693 |         'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined;
1694 |         /**
1695 |          * Indicates that the element is not editable, but is otherwise operable.
1696 |          * @see aria-disabled.
1697 |          */
1698 |         'aria-readonly'?: Booleanish | undefined;
1699 |         /**
1700 |          * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
1701 |          * @see aria-atomic.
1702 |          */
1703 |         'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined;
1704 |         /** Indicates that user input is required on the element before a form may be submitted. */
1705 |         'aria-required'?: Booleanish | undefined;
1706 |         /** Defines a human-readable, author-localized description for the role of an element. */
1707 |         'aria-roledescription'?: string | undefined;
1708 |         /**
1709 |          * Defines the total number of rows in a table, grid, or treegrid.
1710 |          * @see aria-rowindex.
1711 |          */
1712 |         'aria-rowcount'?: number | undefined;
1713 |         /**
1714 |          * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
1715 |          * @see aria-rowcount @see aria-rowspan.
1716 |          */
1717 |         'aria-rowindex'?: number | undefined;
1718 |         /**
1719 |          * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
1720 |          * @see aria-rowindex @see aria-colspan.
1721 |          */
1722 |         'aria-rowspan'?: number | undefined;
1723 |         /**
1724 |          * Indicates the current "selected" state of various widgets.
1725 |          * @see aria-checked @see aria-pressed.
1726 |          */
1727 |         'aria-selected'?: Booleanish | undefined;
1728 |         /**
1729 |          * 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.
1730 |          * @see aria-posinset.
1731 |          */
1732 |         'aria-setsize'?: number | undefined;
1733 |         /** Indicates if items in a table or grid are sorted in ascending or descending order. */
1734 |         'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined;
1735 |         /** Defines the maximum allowed value for a range widget. */
1736 |         'aria-valuemax'?: number | undefined;
1737 |         /** Defines the minimum allowed value for a range widget. */
1738 |         'aria-valuemin'?: number | undefined;
1739 |         /**
1740 |          * Defines the current value for a range widget.
1741 |          * @see aria-valuetext.
1742 |          */
1743 |         'aria-valuenow'?: number | undefined;
1744 |         /** Defines the human readable text alternative of aria-valuenow for a range widget. */
1745 |         'aria-valuetext'?: string | undefined;
1746 |     }
1747 | 
1748 |     // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
1749 |     type AriaRole =
1750 |         | 'alert'
1751 |         | 'alertdialog'
1752 |         | 'application'
1753 |         | 'article'
1754 |         | 'banner'
1755 |         | 'button'
1756 |         | 'cell'
1757 |         | 'checkbox'
1758 |         | 'columnheader'
1759 |         | 'combobox'
1760 |         | 'complementary'
1761 |         | 'contentinfo'
1762 |         | 'definition'
1763 |         | 'dialog'
1764 |         | 'directory'
1765 |         | 'document'
1766 |         | 'feed'
1767 |         | 'figure'
1768 |         | 'form'
1769 |         | 'grid'
1770 |         | 'gridcell'
1771 |         | 'group'
1772 |         | 'heading'
1773 |         | 'img'
1774 |         | 'link'
1775 |         | 'list'
1776 |         | 'listbox'
1777 |         | 'listitem'
1778 |         | 'log'
1779 |         | 'main'
1780 |         | 'marquee'
1781 |         | 'math'
1782 |         | 'menu'
1783 |         | 'menubar'
1784 |         | 'menuitem'
1785 |         | 'menuitemcheckbox'
1786 |         | 'menuitemradio'
1787 |         | 'navigation'
1788 |         | 'none'
1789 |         | 'note'
1790 |         | 'option'
1791 |         | 'presentation'
1792 |         | 'progressbar'
1793 |         | 'radio'
1794 |         | 'radiogroup'
1795 |         | 'region'
1796 |         | 'row'
1797 |         | 'rowgroup'
1798 |         | 'rowheader'
1799 |         | 'scrollbar'
1800 |         | 'search'
1801 |         | 'searchbox'
1802 |         | 'separator'
1803 |         | 'slider'
1804 |         | 'spinbutton'
1805 |         | 'status'
1806 |         | 'switch'
1807 |         | 'tab'
1808 |         | 'table'
1809 |         | 'tablist'
1810 |         | 'tabpanel'
1811 |         | 'term'
1812 |         | 'textbox'
1813 |         | 'timer'
1814 |         | 'toolbar'
1815 |         | 'tooltip'
1816 |         | 'tree'
1817 |         | 'treegrid'
1818 |         | 'treeitem'
1819 |         | (string & {});
1820 | 
1821 |     interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
1822 |         // React-specific Attributes
1823 |         defaultChecked?: boolean | undefined;
1824 |         defaultValue?: string | number | ReadonlyArray<string> | undefined;
1825 |         suppressContentEditableWarning?: boolean | undefined;
1826 |         suppressHydrationWarning?: boolean | undefined;
1827 | 
1828 |         // Standard HTML Attributes
1829 |         accessKey?: string | undefined;
1830 |         className?: string | undefined;
1831 |         contentEditable?: Booleanish | "inherit" | undefined;
1832 |         contextMenu?: string | undefined;
1833 |         dir?: string | undefined;
1834 |         draggable?: Booleanish | undefined;
1835 |         hidden?: boolean | undefined;
1836 |         id?: string | undefined;
1837 |         lang?: string | undefined;
1838 |         placeholder?: string | undefined;
1839 |         slot?: string | undefined;
1840 |         spellCheck?: Booleanish | undefined;
1841 |         style?: CSSProperties | undefined;
1842 |         tabIndex?: number | undefined;
1843 |         title?: string | undefined;
1844 |         translate?: 'yes' | 'no' | undefined;
1845 | 
1846 |         // Unknown
1847 |         radioGroup?: string | undefined; // <command>, <menuitem>
1848 | 
1849 |         // WAI-ARIA
1850 |         role?: AriaRole | undefined;
1851 | 
1852 |         // RDFa Attributes
1853 |         about?: string | undefined;
1854 |         datatype?: string | undefined;
1855 |         inlist?: any;
1856 |         prefix?: string | undefined;
1857 |         property?: string | undefined;
1858 |         resource?: string | undefined;
1859 |         typeof?: string | undefined;
1860 |         vocab?: string | undefined;
1861 | 
1862 |         // Non-standard Attributes
1863 |         autoCapitalize?: string | undefined;
1864 |         autoCorrect?: string | undefined;
1865 |         autoSave?: string | undefined;
1866 |         color?: string | undefined;
1867 |         itemProp?: string | undefined;
1868 |         itemScope?: boolean | undefined;
1869 |         itemType?: string | undefined;
1870 |         itemID?: string | undefined;
1871 |         itemRef?: string | undefined;
1872 |         results?: number | undefined;
1873 |         security?: string | undefined;
1874 |         unselectable?: 'on' | 'off' | undefined;
1875 | 
1876 |         // Living Standard
1877 |         /**
1878 |          * Hints at the type of data that might be entered by the user while editing the element or its contents
1879 |          * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
1880 |          */
1881 |         inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined;
1882 |         /**
1883 |          * Specify that a standard HTML element should behave like a defined custom built-in element
1884 |          * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
1885 |          */
1886 |         is?: string | undefined;
1887 |     }
1888 | 
1889 |     interface AllHTMLAttributes<T> extends HTMLAttributes<T> {
1890 |         // Standard HTML Attributes
1891 |         accept?: string | undefined;
1892 |         acceptCharset?: string | undefined;
1893 |         action?: string | undefined;
1894 |         allowFullScreen?: boolean | undefined;
1895 |         allowTransparency?: boolean | undefined;
1896 |         alt?: string | undefined;
1897 |         as?: string | undefined;
1898 |         async?: boolean | undefined;
1899 |         autoComplete?: string | undefined;
1900 |         autoFocus?: boolean | undefined;
1901 |         autoPlay?: boolean | undefined;
1902 |         capture?: boolean | string | undefined;
1903 |         cellPadding?: number | string | undefined;
1904 |         cellSpacing?: number | string | undefined;
1905 |         charSet?: string | undefined;
1906 |         challenge?: string | undefined;
1907 |         checked?: boolean | undefined;
1908 |         cite?: string | undefined;
1909 |         classID?: string | undefined;
1910 |         cols?: number | undefined;
1911 |         colSpan?: number | undefined;
1912 |         content?: string | undefined;
1913 |         controls?: boolean | undefined;
1914 |         coords?: string | undefined;
1915 |         crossOrigin?: string | undefined;
1916 |         data?: string | undefined;
1917 |         dateTime?: string | undefined;
1918 |         default?: boolean | undefined;
1919 |         defer?: boolean | undefined;
1920 |         disabled?: boolean | undefined;
1921 |         download?: any;
1922 |         encType?: string | undefined;
1923 |         form?: string | undefined;
1924 |         formAction?: string | undefined;
1925 |         formEncType?: string | undefined;
1926 |         formMethod?: string | undefined;
1927 |         formNoValidate?: boolean | undefined;
1928 |         formTarget?: string | undefined;
1929 |         frameBorder?: number | string | undefined;
1930 |         headers?: string | undefined;
1931 |         height?: number | string | undefined;
1932 |         high?: number | undefined;
1933 |         href?: string | undefined;
1934 |         hrefLang?: string | undefined;
1935 |         htmlFor?: string | undefined;
1936 |         httpEquiv?: string | undefined;
1937 |         integrity?: string | undefined;
1938 |         keyParams?: string | undefined;
1939 |         keyType?: string | undefined;
1940 |         kind?: string | undefined;
1941 |         label?: string | undefined;
1942 |         list?: string | undefined;
1943 |         loop?: boolean | undefined;
1944 |         low?: number | undefined;
1945 |         manifest?: string | undefined;
1946 |         marginHeight?: number | undefined;
1947 |         marginWidth?: number | undefined;
1948 |         max?: number | string | undefined;
1949 |         maxLength?: number | undefined;
1950 |         media?: string | undefined;
1951 |         mediaGroup?: string | undefined;
1952 |         method?: string | undefined;
1953 |         min?: number | string | undefined;
1954 |         minLength?: number | undefined;
1955 |         multiple?: boolean | undefined;
1956 |         muted?: boolean | undefined;
1957 |         name?: string | undefined;
1958 |         nonce?: string | undefined;
1959 |         noValidate?: boolean | undefined;
1960 |         open?: boolean | undefined;
1961 |         optimum?: number | undefined;
1962 |         pattern?: string | undefined;
1963 |         placeholder?: string | undefined;
1964 |         playsInline?: boolean | undefined;
1965 |         poster?: string | undefined;
1966 |         preload?: string | undefined;
1967 |         readOnly?: boolean | undefined;
1968 |         rel?: string | undefined;
1969 |         required?: boolean | undefined;
1970 |         reversed?: boolean | undefined;
1971 |         rows?: number | undefined;
1972 |         rowSpan?: number | undefined;
1973 |         sandbox?: string | undefined;
1974 |         scope?: string | undefined;
1975 |         scoped?: boolean | undefined;
1976 |         scrolling?: string | undefined;
1977 |         seamless?: boolean | undefined;
1978 |         selected?: boolean | undefined;
1979 |         shape?: string | undefined;
1980 |         size?: number | undefined;
1981 |         sizes?: string | undefined;
1982 |         span?: number | undefined;
1983 |         src?: string | undefined;
1984 |         srcDoc?: string | undefined;
1985 |         srcLang?: string | undefined;
1986 |         srcSet?: string | undefined;
1987 |         start?: number | undefined;
1988 |         step?: number | string | undefined;
1989 |         summary?: string | undefined;
1990 |         target?: string | undefined;
1991 |         type?: string | undefined;
1992 |         useMap?: string | undefined;
1993 |         value?: string | ReadonlyArray<string> | number | undefined;
1994 |         width?: number | string | undefined;
1995 |         wmode?: string | undefined;
1996 |         wrap?: string | undefined;
1997 |     }
1998 | 
1999 |     type HTMLAttributeReferrerPolicy =
2000 |         | ''
2001 |         | 'no-referrer'
2002 |         | 'no-referrer-when-downgrade'
2003 |         | 'origin'
2004 |         | 'origin-when-cross-origin'
2005 |         | 'same-origin'
2006 |         | 'strict-origin'
2007 |         | 'strict-origin-when-cross-origin'
2008 |         | 'unsafe-url';
2009 | 
2010 |     type HTMLAttributeAnchorTarget =
2011 |         | '_self'
2012 |         | '_blank'
2013 |         | '_parent'
2014 |         | '_top'
2015 |         | (string & {});
2016 | 
2017 |     interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
2018 |         download?: any;
2019 |         href?: string | undefined;
2020 |         hrefLang?: string | undefined;
2021 |         media?: string | undefined;
2022 |         ping?: string | undefined;
2023 |         rel?: string | undefined;
2024 |         target?: HTMLAttributeAnchorTarget | undefined;
2025 |         type?: string | undefined;
2026 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
2027 |     }
2028 | 
2029 |     interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {}
2030 | 
2031 |     interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {
2032 |         alt?: string | undefined;
2033 |         coords?: string | undefined;
2034 |         download?: any;
2035 |         href?: string | undefined;
2036 |         hrefLang?: string | undefined;
2037 |         media?: string | undefined;
2038 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
2039 |         rel?: string | undefined;
2040 |         shape?: string | undefined;
2041 |         target?: string | undefined;
2042 |     }
2043 | 
2044 |     interface BaseHTMLAttributes<T> extends HTMLAttributes<T> {
2045 |         href?: string | undefined;
2046 |         target?: string | undefined;
2047 |     }
2048 | 
2049 |     interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> {
2050 |         cite?: string | undefined;
2051 |     }
2052 | 
2053 |     interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
2054 |         autoFocus?: boolean | undefined;
2055 |         disabled?: boolean | undefined;
2056 |         form?: string | undefined;
2057 |         formAction?: string | undefined;
2058 |         formEncType?: string | undefined;
2059 |         formMethod?: string | undefined;
2060 |         formNoValidate?: boolean | undefined;
2061 |         formTarget?: string | undefined;
2062 |         name?: string | undefined;
2063 |         type?: 'submit' | 'reset' | 'button' | undefined;
2064 |         value?: string | ReadonlyArray<string> | number | undefined;
2065 |     }
2066 | 
2067 |     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
2068 |         height?: number | string | undefined;
2069 |         width?: number | string | undefined;
2070 |     }
2071 | 
2072 |     interface ColHTMLAttributes<T> extends HTMLAttributes<T> {
2073 |         span?: number | undefined;
2074 |         width?: number | string | undefined;
2075 |     }
2076 | 
2077 |     interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> {
2078 |         span?: number | undefined;
2079 |     }
2080 | 
2081 |     interface DataHTMLAttributes<T> extends HTMLAttributes<T> {
2082 |         value?: string | ReadonlyArray<string> | number | undefined;
2083 |     }
2084 | 
2085 |     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
2086 |         open?: boolean | undefined;
2087 |         onToggle?: ReactEventHandler<T> | undefined;
2088 |     }
2089 | 
2090 |     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
2091 |         cite?: string | undefined;
2092 |         dateTime?: string | undefined;
2093 |     }
2094 | 
2095 |     interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
2096 |         open?: boolean | undefined;
2097 |     }
2098 | 
2099 |     interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
2100 |         height?: number | string | undefined;
2101 |         src?: string | undefined;
2102 |         type?: string | undefined;
2103 |         width?: number | string | undefined;
2104 |     }
2105 | 
2106 |     interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> {
2107 |         disabled?: boolean | undefined;
2108 |         form?: string | undefined;
2109 |         name?: string | undefined;
2110 |     }
2111 | 
2112 |     interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
2113 |         acceptCharset?: string | undefined;
2114 |         action?: string | undefined;
2115 |         autoComplete?: string | undefined;
2116 |         encType?: string | undefined;
2117 |         method?: string | undefined;
2118 |         name?: string | undefined;
2119 |         noValidate?: boolean | undefined;
2120 |         target?: string | undefined;
2121 |     }
2122 | 
2123 |     interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> {
2124 |         manifest?: string | undefined;
2125 |     }
2126 | 
2127 |     interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
2128 |         allow?: string | undefined;
2129 |         allowFullScreen?: boolean | undefined;
2130 |         allowTransparency?: boolean | undefined;
2131 |         /** @deprecated */
2132 |         frameBorder?: number | string | undefined;
2133 |         height?: number | string | undefined;
2134 |         loading?: "eager" | "lazy" | undefined;
2135 |         /** @deprecated */
2136 |         marginHeight?: number | undefined;
2137 |         /** @deprecated */
2138 |         marginWidth?: number | undefined;
2139 |         name?: string | undefined;
2140 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
2141 |         sandbox?: string | undefined;
2142 |         /** @deprecated */
2143 |         scrolling?: string | undefined;
2144 |         seamless?: boolean | undefined;
2145 |         src?: string | undefined;
2146 |         srcDoc?: string | undefined;
2147 |         width?: number | string | undefined;
2148 |     }
2149 | 
2150 |     interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
2151 |         alt?: string | undefined;
2152 |         crossOrigin?: "anonymous" | "use-credentials" | "" | undefined;
2153 |         decoding?: "async" | "auto" | "sync" | undefined;
2154 |         height?: number | string | undefined;
2155 |         loading?: "eager" | "lazy" | undefined;
2156 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
2157 |         sizes?: string | undefined;
2158 |         src?: string | undefined;
2159 |         srcSet?: string | undefined;
2160 |         useMap?: string | undefined;
2161 |         width?: number | string | undefined;
2162 |     }
2163 | 
2164 |     interface InsHTMLAttributes<T> extends HTMLAttributes<T> {
2165 |         cite?: string | undefined;
2166 |         dateTime?: string | undefined;
2167 |     }
2168 | 
2169 |     type HTMLInputTypeAttribute =
2170 |         | 'button'
2171 |         | 'checkbox'
2172 |         | 'color'
2173 |         | 'date'
2174 |         | 'datetime-local'
2175 |         | 'email'
2176 |         | 'file'
2177 |         | 'hidden'
2178 |         | 'image'
2179 |         | 'month'
2180 |         | 'number'
2181 |         | 'password'
2182 |         | 'radio'
2183 |         | 'range'
2184 |         | 'reset'
2185 |         | 'search'
2186 |         | 'submit'
2187 |         | 'tel'
2188 |         | 'text'
2189 |         | 'time'
2190 |         | 'url'
2191 |         | 'week'
2192 |         | (string & {});
2193 | 
2194 |     interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
2195 |         accept?: string | undefined;
2196 |         alt?: string | undefined;
2197 |         autoComplete?: string | undefined;
2198 |         autoFocus?: boolean | undefined;
2199 |         capture?: boolean | string | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
2200 |         checked?: boolean | undefined;
2201 |         crossOrigin?: string | undefined;
2202 |         disabled?: boolean | undefined;
2203 |         enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined;
2204 |         form?: string | undefined;
2205 |         formAction?: string | undefined;
2206 |         formEncType?: string | undefined;
2207 |         formMethod?: string | undefined;
2208 |         formNoValidate?: boolean | undefined;
2209 |         formTarget?: string | undefined;
2210 |         height?: number | string | undefined;
2211 |         list?: string | undefined;
2212 |         max?: number | string | undefined;
2213 |         maxLength?: number | undefined;
2214 |         min?: number | string | undefined;
2215 |         minLength?: number | undefined;
2216 |         multiple?: boolean | undefined;
2217 |         name?: string | undefined;
2218 |         pattern?: string | undefined;
2219 |         placeholder?: string | undefined;
2220 |         readOnly?: boolean | undefined;
2221 |         required?: boolean | undefined;
2222 |         size?: number | undefined;
2223 |         src?: string | undefined;
2224 |         step?: number | string | undefined;
2225 |         type?: HTMLInputTypeAttribute | undefined;
2226 |         value?: string | ReadonlyArray<string> | number | undefined;
2227 |         width?: number | string | undefined;
2228 | 
2229 |         onChange?: ChangeEventHandler<T> | undefined;
2230 |     }
2231 | 
2232 |     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
2233 |         autoFocus?: boolean | undefined;
2234 |         challenge?: string | undefined;
2235 |         disabled?: boolean | undefined;
2236 |         form?: string | undefined;
2237 |         keyType?: string | undefined;
2238 |         keyParams?: string | undefined;
2239 |         name?: string | undefined;
2240 |     }
2241 | 
2242 |     interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
2243 |         form?: string | undefined;
2244 |         htmlFor?: string | undefined;
2245 |     }
2246 | 
2247 |     interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
2248 |         value?: string | ReadonlyArray<string> | number | undefined;
2249 |     }
2250 | 
2251 |     interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
2252 |         as?: string | undefined;
2253 |         crossOrigin?: string | undefined;
2254 |         href?: string | undefined;
2255 |         hrefLang?: string | undefined;
2256 |         integrity?: string | undefined;
2257 |         media?: string | undefined;
2258 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
2259 |         rel?: string | undefined;
2260 |         sizes?: string | undefined;
2261 |         type?: string | undefined;
2262 |         charSet?: string | undefined;
2263 |     }
2264 | 
2265 |     interface MapHTMLAttributes<T> extends HTMLAttributes<T> {
2266 |         name?: string | undefined;
2267 |     }
2268 | 
2269 |     interface MenuHTMLAttributes<T> extends HTMLAttributes<T> {
2270 |         type?: string | undefined;
2271 |     }
2272 | 
2273 |     interface MediaHTMLAttributes<T> extends HTMLAttributes<T> {
2274 |         autoPlay?: boolean | undefined;
2275 |         controls?: boolean | undefined;
2276 |         controlsList?: string | undefined;
2277 |         crossOrigin?: string | undefined;
2278 |         loop?: boolean | undefined;
2279 |         mediaGroup?: string | undefined;
2280 |         muted?: boolean | undefined;
2281 |         playsInline?: boolean | undefined;
2282 |         preload?: string | undefined;
2283 |         src?: string | undefined;
2284 |     }
2285 | 
2286 |     interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
2287 |         charSet?: string | undefined;
2288 |         content?: string | undefined;
2289 |         httpEquiv?: string | undefined;
2290 |         name?: string | undefined;
2291 |         media?: string | undefined;
2292 |     }
2293 | 
2294 |     interface MeterHTMLAttributes<T> extends HTMLAttributes<T> {
2295 |         form?: string | undefined;
2296 |         high?: number | undefined;
2297 |         low?: number | undefined;
2298 |         max?: number | string | undefined;
2299 |         min?: number | string | undefined;
2300 |         optimum?: number | undefined;
2301 |         value?: string | ReadonlyArray<string> | number | undefined;
2302 |     }
2303 | 
2304 |     interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> {
2305 |         cite?: string | undefined;
2306 |     }
2307 | 
2308 |     interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> {
2309 |         classID?: string | undefined;
2310 |         data?: string | undefined;
2311 |         form?: string | undefined;
2312 |         height?: number | string | undefined;
2313 |         name?: string | undefined;
2314 |         type?: string | undefined;
2315 |         useMap?: string | undefined;
2316 |         width?: number | string | undefined;
2317 |         wmode?: string | undefined;
2318 |     }
2319 | 
2320 |     interface OlHTMLAttributes<T> extends HTMLAttributes<T> {
2321 |         reversed?: boolean | undefined;
2322 |         start?: number | undefined;
2323 |         type?: '1' | 'a' | 'A' | 'i' | 'I' | undefined;
2324 |     }
2325 | 
2326 |     interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> {
2327 |         disabled?: boolean | undefined;
2328 |         label?: string | undefined;
2329 |     }
2330 | 
2331 |     interface OptionHTMLAttributes<T> extends HTMLAttributes<T> {
2332 |         disabled?: boolean | undefined;
2333 |         label?: string | undefined;
2334 |         selected?: boolean | undefined;
2335 |         value?: string | ReadonlyArray<string> | number | undefined;
2336 |     }
2337 | 
2338 |     interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
2339 |         form?: string | undefined;
2340 |         htmlFor?: string | undefined;
2341 |         name?: string | undefined;
2342 |     }
2343 | 
2344 |     interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
2345 |         name?: string | undefined;
2346 |         value?: string | ReadonlyArray<string> | number | undefined;
2347 |     }
2348 | 
2349 |     interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> {
2350 |         max?: number | string | undefined;
2351 |         value?: string | ReadonlyArray<string> | number | undefined;
2352 |     }
2353 | 
2354 |     interface SlotHTMLAttributes<T> extends HTMLAttributes<T> {
2355 |         name?: string | undefined;
2356 |     }
2357 | 
2358 |     interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> {
2359 |         async?: boolean | undefined;
2360 |         /** @deprecated */
2361 |         charSet?: string | undefined;
2362 |         crossOrigin?: string | undefined;
2363 |         defer?: boolean | undefined;
2364 |         integrity?: string | undefined;
2365 |         noModule?: boolean | undefined;
2366 |         nonce?: string | undefined;
2367 |         referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
2368 |         src?: string | undefined;
2369 |         type?: string | undefined;
2370 |     }
2371 | 
2372 |     interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
2373 |         autoComplete?: string | undefined;
2374 |         autoFocus?: boolean | undefined;
2375 |         disabled?: boolean | undefined;
2376 |         form?: string | undefined;
2377 |         multiple?: boolean | undefined;
2378 |         name?: string | undefined;
2379 |         required?: boolean | undefined;
2380 |         size?: number | undefined;
2381 |         value?: string | ReadonlyArray<string> | number | undefined;
2382 |         onChange?: ChangeEventHandler<T> | undefined;
2383 |     }
2384 | 
2385 |     interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
2386 |         height?: number | string | undefined;
2387 |         media?: string | undefined;
2388 |         sizes?: string | undefined;
2389 |         src?: string | undefined;
2390 |         srcSet?: string | undefined;
2391 |         type?: string | undefined;
2392 |         width?: number | string | undefined;
2393 |     }
2394 | 
2395 |     interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
2396 |         media?: string | undefined;
2397 |         nonce?: string | undefined;
2398 |         scoped?: boolean | undefined;
2399 |         type?: string | undefined;
2400 |     }
2401 | 
2402 |     interface TableHTMLAttributes<T> extends HTMLAttributes<T> {
2403 |         cellPadding?: number | string | undefined;
2404 |         cellSpacing?: number | string | undefined;
2405 |         summary?: string | undefined;
2406 |         width?: number | string | undefined;
2407 |     }
2408 | 
2409 |     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
2410 |         autoComplete?: string | undefined;
2411 |         autoFocus?: boolean | undefined;
2412 |         cols?: number | undefined;
2413 |         dirName?: string | undefined;
2414 |         disabled?: boolean | undefined;
2415 |         form?: string | undefined;
2416 |         maxLength?: number | undefined;
2417 |         minLength?: number | undefined;
2418 |         name?: string | undefined;
2419 |         placeholder?: string | undefined;
2420 |         readOnly?: boolean | undefined;
2421 |         required?: boolean | undefined;
2422 |         rows?: number | undefined;
2423 |         value?: string | ReadonlyArray<string> | number | undefined;
2424 |         wrap?: string | undefined;
2425 | 
2426 |         onChange?: ChangeEventHandler<T> | undefined;
2427 |     }
2428 | 
2429 |     interface TdHTMLAttributes<T> extends HTMLAttributes<T> {
2430 |         align?: "left" | "center" | "right" | "justify" | "char" | undefined;
2431 |         colSpan?: number | undefined;
2432 |         headers?: string | undefined;
2433 |         rowSpan?: number | undefined;
2434 |         scope?: string | undefined;
2435 |         abbr?: string | undefined;
2436 |         height?: number | string | undefined;
2437 |         width?: number | string | undefined;
2438 |         valign?: "top" | "middle" | "bottom" | "baseline" | undefined;
2439 |     }
2440 | 
2441 |     interface ThHTMLAttributes<T> extends HTMLAttributes<T> {
2442 |         align?: "left" | "center" | "right" | "justify" | "char" | undefined;
2443 |         colSpan?: number | undefined;
2444 |         headers?: string | undefined;
2445 |         rowSpan?: number | undefined;
2446 |         scope?: string | undefined;
2447 |         abbr?: string | undefined;
2448 |     }
2449 | 
2450 |     interface TimeHTMLAttributes<T> extends HTMLAttributes<T> {
2451 |         dateTime?: string | undefined;
2452 |     }
2453 | 
2454 |     interface TrackHTMLAttributes<T> extends HTMLAttributes<T> {
2455 |         default?: boolean | undefined;
2456 |         kind?: string | undefined;
2457 |         label?: string | undefined;
2458 |         src?: string | undefined;
2459 |         srcLang?: string | undefined;
2460 |     }
2461 | 
2462 |     interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {
2463 |         height?: number | string | undefined;
2464 |         playsInline?: boolean | undefined;
2465 |         poster?: string | undefined;
2466 |         width?: number | string | undefined;
2467 |         disablePictureInPicture?: boolean | undefined;
2468 |         disableRemotePlayback?: boolean | undefined;
2469 |     }
2470 | 
2471 |     // this list is "complete" in that it contains every SVG attribute
2472 |     // that React supports, but the types can be improved.
2473 |     // Full list here: https://facebook.github.io/react/docs/dom-elements.html
2474 |     //
2475 |     // The three broad type categories are (in order of restrictiveness):
2476 |     //   - "number | string"
2477 |     //   - "string"
2478 |     //   - union of string literals
2479 |     interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
2480 |         // Attributes which also defined in HTMLAttributes
2481 |         // See comment in SVGDOMPropertyConfig.js
2482 |         className?: string | undefined;
2483 |         color?: string | undefined;
2484 |         height?: number | string | undefined;
2485 |         id?: string | undefined;
2486 |         lang?: string | undefined;
2487 |         max?: number | string | undefined;
2488 |         media?: string | undefined;
2489 |         method?: string | undefined;
2490 |         min?: number | string | undefined;
2491 |         name?: string | undefined;
2492 |         style?: CSSProperties | undefined;
2493 |         target?: string | undefined;
2494 |         type?: string | undefined;
2495 |         width?: number | string | undefined;
2496 | 
2497 |         // Other HTML properties supported by SVG elements in browsers
2498 |         role?: AriaRole | undefined;
2499 |         tabIndex?: number | undefined;
2500 |         crossOrigin?: "anonymous" | "use-credentials" | "" | undefined;
2501 | 
2502 |         // SVG Specific attributes
2503 |         accentHeight?: number | string | undefined;
2504 |         accumulate?: "none" | "sum" | undefined;
2505 |         additive?: "replace" | "sum" | undefined;
2506 |         alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" |
2507 |         "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | undefined;
2508 |         allowReorder?: "no" | "yes" | undefined;
2509 |         alphabetic?: number | string | undefined;
2510 |         amplitude?: number | string | undefined;
2511 |         arabicForm?: "initial" | "medial" | "terminal" | "isolated" | undefined;
2512 |         ascent?: number | string | undefined;
2513 |         attributeName?: string | undefined;
2514 |         attributeType?: string | undefined;
2515 |         autoReverse?: Booleanish | undefined;
2516 |         azimuth?: number | string | undefined;
2517 |         baseFrequency?: number | string | undefined;
2518 |         baselineShift?: number | string | undefined;
2519 |         baseProfile?: number | string | undefined;
2520 |         bbox?: number | string | undefined;
2521 |         begin?: number | string | undefined;
2522 |         bias?: number | string | undefined;
2523 |         by?: number | string | undefined;
2524 |         calcMode?: number | string | undefined;
2525 |         capHeight?: number | string | undefined;
2526 |         clip?: number | string | undefined;
2527 |         clipPath?: string | undefined;
2528 |         clipPathUnits?: number | string | undefined;
2529 |         clipRule?: number | string | undefined;
2530 |         colorInterpolation?: number | string | undefined;
2531 |         colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit" | undefined;
2532 |         colorProfile?: number | string | undefined;
2533 |         colorRendering?: number | string | undefined;
2534 |         contentScriptType?: number | string | undefined;
2535 |         contentStyleType?: number | string | undefined;
2536 |         cursor?: number | string | undefined;
2537 |         cx?: number | string | undefined;
2538 |         cy?: number | string | undefined;
2539 |         d?: string | undefined;
2540 |         decelerate?: number | string | undefined;
2541 |         descent?: number | string | undefined;
2542 |         diffuseConstant?: number | string | undefined;
2543 |         direction?: number | string | undefined;
2544 |         display?: number | string | undefined;
2545 |         divisor?: number | string | undefined;
2546 |         dominantBaseline?: number | string | undefined;
2547 |         dur?: number | string | undefined;
2548 |         dx?: number | string | undefined;
2549 |         dy?: number | string | undefined;
2550 |         edgeMode?: number | string | undefined;
2551 |         elevation?: number | string | undefined;
2552 |         enableBackground?: number | string | undefined;
2553 |         end?: number | string | undefined;
2554 |         exponent?: number | string | undefined;
2555 |         externalResourcesRequired?: Booleanish | undefined;
2556 |         fill?: string | undefined;
2557 |         fillOpacity?: number | string | undefined;
2558 |         fillRule?: "nonzero" | "evenodd" | "inherit" | undefined;
2559 |         filter?: string | undefined;
2560 |         filterRes?: number | string | undefined;
2561 |         filterUnits?: number | string | undefined;
2562 |         floodColor?: number | string | undefined;
2563 |         floodOpacity?: number | string | undefined;
2564 |         focusable?: Booleanish | "auto" | undefined;
2565 |         fontFamily?: string | undefined;
2566 |         fontSize?: number | string | undefined;
2567 |         fontSizeAdjust?: number | string | undefined;
2568 |         fontStretch?: number | string | undefined;
2569 |         fontStyle?: number | string | undefined;
2570 |         fontVariant?: number | string | undefined;
2571 |         fontWeight?: number | string | undefined;
2572 |         format?: number | string | undefined;
2573 |         from?: number | string | undefined;
2574 |         fx?: number | string | undefined;
2575 |         fy?: number | string | undefined;
2576 |         g1?: number | string | undefined;
2577 |         g2?: number | string | undefined;
2578 |         glyphName?: number | string | undefined;
2579 |         glyphOrientationHorizontal?: number | string | undefined;
2580 |         glyphOrientationVertical?: number | string | undefined;
2581 |         glyphRef?: number | string | undefined;
2582 |         gradientTransform?: string | undefined;
2583 |         gradientUnits?: string | undefined;
2584 |         hanging?: number | string | undefined;
2585 |         horizAdvX?: number | string | undefined;
2586 |         horizOriginX?: number | string | undefined;
2587 |         href?: string | undefined;
2588 |         ideographic?: number | string | undefined;
2589 |         imageRendering?: number | string | undefined;
2590 |         in2?: number | string | undefined;
2591 |         in?: string | undefined;
2592 |         intercept?: number | string | undefined;
2593 |         k1?: number | string | undefined;
2594 |         k2?: number | string | undefined;
2595 |         k3?: number | string | undefined;
2596 |         k4?: number | string | undefined;
2597 |         k?: number | string | undefined;
2598 |         kernelMatrix?: number | string | undefined;
2599 |         kernelUnitLength?: number | string | undefined;
2600 |         kerning?: number | string | undefined;
2601 |         keyPoints?: number | string | undefined;
2602 |         keySplines?: number | string | undefined;
2603 |         keyTimes?: number | string | undefined;
2604 |         lengthAdjust?: number | string | undefined;
2605 |         letterSpacing?: number | string | undefined;
2606 |         lightingColor?: number | string | undefined;
2607 |         limitingConeAngle?: number | string | undefined;
2608 |         local?: number | string | undefined;
2609 |         markerEnd?: string | undefined;
2610 |         markerHeight?: number | string | undefined;
2611 |         markerMid?: string | undefined;
2612 |         markerStart?: string | undefined;
2613 |         markerUnits?: number | string | undefined;
2614 |         markerWidth?: number | string | undefined;
2615 |         mask?: string | undefined;
2616 |         maskContentUnits?: number | string | undefined;
2617 |         maskUnits?: number | string | undefined;
2618 |         mathematical?: number | string | undefined;
2619 |         mode?: number | string | undefined;
2620 |         numOctaves?: number | string | undefined;
2621 |         offset?: number | string | undefined;
2622 |         opacity?: number | string | undefined;
2623 |         operator?: number | string | undefined;
2624 |         order?: number | string | undefined;
2625 |         orient?: number | string | undefined;
2626 |         orientation?: number | string | undefined;
2627 |         origin?: number | string | undefined;
2628 |         overflow?: number | string | undefined;
2629 |         overlinePosition?: number | string | undefined;
2630 |         overlineThickness?: number | string | undefined;
2631 |         paintOrder?: number | string | undefined;
2632 |         panose1?: number | string | undefined;
2633 |         path?: string | undefined;
2634 |         pathLength?: number | string | undefined;
2635 |         patternContentUnits?: string | undefined;
2636 |         patternTransform?: number | string | undefined;
2637 |         patternUnits?: string | undefined;
2638 |         pointerEvents?: number | string | undefined;
2639 |         points?: string | undefined;
2640 |         pointsAtX?: number | string | undefined;
2641 |         pointsAtY?: number | string | undefined;
2642 |         pointsAtZ?: number | string | undefined;
2643 |         preserveAlpha?: Booleanish | undefined;
2644 |         preserveAspectRatio?: string | undefined;
2645 |         primitiveUnits?: number | string | undefined;
2646 |         r?: number | string | undefined;
2647 |         radius?: number | string | undefined;
2648 |         refX?: number | string | undefined;
2649 |         refY?: number | string | undefined;
2650 |         renderingIntent?: number | string | undefined;
2651 |         repeatCount?: number | string | undefined;
2652 |         repeatDur?: number | string | undefined;
2653 |         requiredExtensions?: number | string | undefined;
2654 |         requiredFeatures?: number | string | undefined;
2655 |         restart?: number | string | undefined;
2656 |         result?: string | undefined;
2657 |         rotate?: number | string | undefined;
2658 |         rx?: number | string | undefined;
2659 |         ry?: number | string | undefined;
2660 |         scale?: number | string | undefined;
2661 |         seed?: number | string | undefined;
2662 |         shapeRendering?: number | string | undefined;
2663 |         slope?: number | string | undefined;
2664 |         spacing?: number | string | undefined;
2665 |         specularConstant?: number | string | undefined;
2666 |         specularExponent?: number | string | undefined;
2667 |         speed?: number | string | undefined;
2668 |         spreadMethod?: string | undefined;
2669 |         startOffset?: number | string | undefined;
2670 |         stdDeviation?: number | string | undefined;
2671 |         stemh?: number | string | undefined;
2672 |         stemv?: number | string | undefined;
2673 |         stitchTiles?: number | string | undefined;
2674 |         stopColor?: string | undefined;
2675 |         stopOpacity?: number | string | undefined;
2676 |         strikethroughPosition?: number | string | undefined;
2677 |         strikethroughThickness?: number | string | undefined;
2678 |         string?: number | string | undefined;
2679 |         stroke?: string | undefined;
2680 |         strokeDasharray?: string | number | undefined;
2681 |         strokeDashoffset?: string | number | undefined;
2682 |         strokeLinecap?: "butt" | "round" | "square" | "inherit" | undefined;
2683 |         strokeLinejoin?: "miter" | "round" | "bevel" | "inherit" | undefined;
2684 |         strokeMiterlimit?: number | string | undefined;
2685 |         strokeOpacity?: number | string | undefined;
2686 |         strokeWidth?: number | string | undefined;
2687 |         surfaceScale?: number | string | undefined;
2688 |         systemLanguage?: number | string | undefined;
2689 |         tableValues?: number | string | undefined;
2690 |         targetX?: number | string | undefined;
2691 |         targetY?: number | string | undefined;
2692 |         textAnchor?: string | undefined;
2693 |         textDecoration?: number | string | undefined;
2694 |         textLength?: number | string | undefined;
2695 |         textRendering?: number | string | undefined;
2696 |         to?: number | string | undefined;
2697 |         transform?: string | undefined;
2698 |         u1?: number | string | undefined;
2699 |         u2?: number | string | undefined;
2700 |         underlinePosition?: number | string | undefined;
2701 |         underlineThickness?: number | string | undefined;
2702 |         unicode?: number | string | undefined;
2703 |         unicodeBidi?: number | string | undefined;
2704 |         unicodeRange?: number | string | undefined;
2705 |         unitsPerEm?: number | string | undefined;
2706 |         vAlphabetic?: number | string | undefined;
2707 |         values?: string | undefined;
2708 |         vectorEffect?: number | string | undefined;
2709 |         version?: string | undefined;
2710 |         vertAdvY?: number | string | undefined;
2711 |         vertOriginX?: number | string | undefined;
2712 |         vertOriginY?: number | string | undefined;
2713 |         vHanging?: number | string | undefined;
2714 |         vIdeographic?: number | string | undefined;
2715 |         viewBox?: string | undefined;
2716 |         viewTarget?: number | string | undefined;
2717 |         visibility?: number | string | undefined;
2718 |         vMathematical?: number | string | undefined;
2719 |         widths?: number | string | undefined;
2720 |         wordSpacing?: number | string | undefined;
2721 |         writingMode?: number | string | undefined;
2722 |         x1?: number | string | undefined;
2723 |         x2?: number | string | undefined;
2724 |         x?: number | string | undefined;
2725 |         xChannelSelector?: string | undefined;
2726 |         xHeight?: number | string | undefined;
2727 |         xlinkActuate?: string | undefined;
2728 |         xlinkArcrole?: string | undefined;
2729 |         xlinkHref?: string | undefined;
2730 |         xlinkRole?: string | undefined;
2731 |         xlinkShow?: string | undefined;
2732 |         xlinkTitle?: string | undefined;
2733 |         xlinkType?: string | undefined;
2734 |         xmlBase?: string | undefined;
2735 |         xmlLang?: string | undefined;
2736 |         xmlns?: string | undefined;
2737 |         xmlnsXlink?: string | undefined;
2738 |         xmlSpace?: string | undefined;
2739 |         y1?: number | string | undefined;
2740 |         y2?: number | string | undefined;
2741 |         y?: number | string | undefined;
2742 |         yChannelSelector?: string | undefined;
2743 |         z?: number | string | undefined;
2744 |         zoomAndPan?: string | undefined;
2745 |     }
2746 | 
2747 |     interface WebViewHTMLAttributes<T> extends HTMLAttributes<T> {
2748 |         allowFullScreen?: boolean | undefined;
2749 |         allowpopups?: boolean | undefined;
2750 |         autoFocus?: boolean | undefined;
2751 |         autosize?: boolean | undefined;
2752 |         blinkfeatures?: string | undefined;
2753 |         disableblinkfeatures?: string | undefined;
2754 |         disableguestresize?: boolean | undefined;
2755 |         disablewebsecurity?: boolean | undefined;
2756 |         guestinstance?: string | undefined;
2757 |         httpreferrer?: string | undefined;
2758 |         nodeintegration?: boolean | undefined;
2759 |         partition?: string | undefined;
2760 |         plugins?: boolean | undefined;
2761 |         preload?: string | undefined;
2762 |         src?: string | undefined;
2763 |         useragent?: string | undefined;
2764 |         webpreferences?: string | undefined;
2765 |     }
2766 | 
2767 |     //
2768 |     // React.DOM
2769 |     // ----------------------------------------------------------------------
2770 | 
2771 |     interface ReactHTML {
2772 |         a: DetailedHTMLFactory<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
2773 |         abbr: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2774 |         address: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2775 |         area: DetailedHTMLFactory<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>;
2776 |         article: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2777 |         aside: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2778 |         audio: DetailedHTMLFactory<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>;
2779 |         b: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2780 |         base: DetailedHTMLFactory<BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>;
2781 |         bdi: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2782 |         bdo: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2783 |         big: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2784 |         blockquote: DetailedHTMLFactory<BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>;
2785 |         body: DetailedHTMLFactory<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
2786 |         br: DetailedHTMLFactory<HTMLAttributes<HTMLBRElement>, HTMLBRElement>;
2787 |         button: DetailedHTMLFactory<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
2788 |         canvas: DetailedHTMLFactory<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>;
2789 |         caption: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2790 |         cite: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2791 |         code: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2792 |         col: DetailedHTMLFactory<ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>;
2793 |         colgroup: DetailedHTMLFactory<ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>;
2794 |         data: DetailedHTMLFactory<DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>;
2795 |         datalist: DetailedHTMLFactory<HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>;
2796 |         dd: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2797 |         del: DetailedHTMLFactory<DelHTMLAttributes<HTMLElement>, HTMLElement>;
2798 |         details: DetailedHTMLFactory<DetailsHTMLAttributes<HTMLElement>, HTMLElement>;
2799 |         dfn: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2800 |         dialog: DetailedHTMLFactory<DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>;
2801 |         div: DetailedHTMLFactory<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
2802 |         dl: DetailedHTMLFactory<HTMLAttributes<HTMLDListElement>, HTMLDListElement>;
2803 |         dt: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2804 |         em: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2805 |         embed: DetailedHTMLFactory<EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>;
2806 |         fieldset: DetailedHTMLFactory<FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>;
2807 |         figcaption: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2808 |         figure: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2809 |         footer: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2810 |         form: DetailedHTMLFactory<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
2811 |         h1: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
2812 |         h2: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
2813 |         h3: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
2814 |         h4: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
2815 |         h5: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
2816 |         h6: DetailedHTMLFactory<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
2817 |         head: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLHeadElement>;
2818 |         header: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2819 |         hgroup: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2820 |         hr: DetailedHTMLFactory<HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
2821 |         html: DetailedHTMLFactory<HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>;
2822 |         i: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2823 |         iframe: DetailedHTMLFactory<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>;
2824 |         img: DetailedHTMLFactory<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
2825 |         input: DetailedHTMLFactory<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
2826 |         ins: DetailedHTMLFactory<InsHTMLAttributes<HTMLModElement>, HTMLModElement>;
2827 |         kbd: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2828 |         keygen: DetailedHTMLFactory<KeygenHTMLAttributes<HTMLElement>, HTMLElement>;
2829 |         label: DetailedHTMLFactory<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
2830 |         legend: DetailedHTMLFactory<HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>;
2831 |         li: DetailedHTMLFactory<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
2832 |         link: DetailedHTMLFactory<LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>;
2833 |         main: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2834 |         map: DetailedHTMLFactory<MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>;
2835 |         mark: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2836 |         menu: DetailedHTMLFactory<MenuHTMLAttributes<HTMLElement>, HTMLElement>;
2837 |         menuitem: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2838 |         meta: DetailedHTMLFactory<MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>;
2839 |         meter: DetailedHTMLFactory<MeterHTMLAttributes<HTMLElement>, HTMLElement>;
2840 |         nav: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2841 |         noscript: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2842 |         object: DetailedHTMLFactory<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>;
2843 |         ol: DetailedHTMLFactory<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>;
2844 |         optgroup: DetailedHTMLFactory<OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>;
2845 |         option: DetailedHTMLFactory<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
2846 |         output: DetailedHTMLFactory<OutputHTMLAttributes<HTMLElement>, HTMLElement>;
2847 |         p: DetailedHTMLFactory<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
2848 |         param: DetailedHTMLFactory<ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>;
2849 |         picture: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2850 |         pre: DetailedHTMLFactory<HTMLAttributes<HTMLPreElement>, HTMLPreElement>;
2851 |         progress: DetailedHTMLFactory<ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>;
2852 |         q: DetailedHTMLFactory<QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>;
2853 |         rp: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2854 |         rt: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2855 |         ruby: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2856 |         s: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2857 |         samp: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2858 |         slot: DetailedHTMLFactory<SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement>;
2859 |         script: DetailedHTMLFactory<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>;
2860 |         section: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2861 |         select: DetailedHTMLFactory<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
2862 |         small: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2863 |         source: DetailedHTMLFactory<SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>;
2864 |         span: DetailedHTMLFactory<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
2865 |         strong: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2866 |         style: DetailedHTMLFactory<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>;
2867 |         sub: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2868 |         summary: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2869 |         sup: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2870 |         table: DetailedHTMLFactory<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
2871 |         template: DetailedHTMLFactory<HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement>;
2872 |         tbody: DetailedHTMLFactory<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
2873 |         td: DetailedHTMLFactory<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>;
2874 |         textarea: DetailedHTMLFactory<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
2875 |         tfoot: DetailedHTMLFactory<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
2876 |         th: DetailedHTMLFactory<ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>;
2877 |         thead: DetailedHTMLFactory<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
2878 |         time: DetailedHTMLFactory<TimeHTMLAttributes<HTMLElement>, HTMLElement>;
2879 |         title: DetailedHTMLFactory<HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>;
2880 |         tr: DetailedHTMLFactory<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
2881 |         track: DetailedHTMLFactory<TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>;
2882 |         u: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2883 |         ul: DetailedHTMLFactory<HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
2884 |         "var": DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2885 |         video: DetailedHTMLFactory<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
2886 |         wbr: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
2887 |         webview: DetailedHTMLFactory<WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>;
2888 |     }
2889 | 
2890 |     interface ReactSVG {
2891 |         animate: SVGFactory;
2892 |         circle: SVGFactory;
2893 |         clipPath: SVGFactory;
2894 |         defs: SVGFactory;
2895 |         desc: SVGFactory;
2896 |         ellipse: SVGFactory;
2897 |         feBlend: SVGFactory;
2898 |         feColorMatrix: SVGFactory;
2899 |         feComponentTransfer: SVGFactory;
2900 |         feComposite: SVGFactory;
2901 |         feConvolveMatrix: SVGFactory;
2902 |         feDiffuseLighting: SVGFactory;
2903 |         feDisplacementMap: SVGFactory;
2904 |         feDistantLight: SVGFactory;
2905 |         feDropShadow: SVGFactory;
2906 |         feFlood: SVGFactory;
2907 |         feFuncA: SVGFactory;
2908 |         feFuncB: SVGFactory;
2909 |         feFuncG: SVGFactory;
2910 |         feFuncR: SVGFactory;
2911 |         feGaussianBlur: SVGFactory;
2912 |         feImage: SVGFactory;
2913 |         feMerge: SVGFactory;
2914 |         feMergeNode: SVGFactory;
2915 |         feMorphology: SVGFactory;
2916 |         feOffset: SVGFactory;
2917 |         fePointLight: SVGFactory;
2918 |         feSpecularLighting: SVGFactory;
2919 |         feSpotLight: SVGFactory;
2920 |         feTile: SVGFactory;
2921 |         feTurbulence: SVGFactory;
2922 |         filter: SVGFactory;
2923 |         foreignObject: SVGFactory;
2924 |         g: SVGFactory;
2925 |         image: SVGFactory;
2926 |         line: SVGFactory;
2927 |         linearGradient: SVGFactory;
2928 |         marker: SVGFactory;
2929 |         mask: SVGFactory;
2930 |         metadata: SVGFactory;
2931 |         path: SVGFactory;
2932 |         pattern: SVGFactory;
2933 |         polygon: SVGFactory;
2934 |         polyline: SVGFactory;
2935 |         radialGradient: SVGFactory;
2936 |         rect: SVGFactory;
2937 |         stop: SVGFactory;
2938 |         svg: SVGFactory;
2939 |         switch: SVGFactory;
2940 |         symbol: SVGFactory;
2941 |         text: SVGFactory;
2942 |         textPath: SVGFactory;
2943 |         tspan: SVGFactory;
2944 |         use: SVGFactory;
2945 |         view: SVGFactory;
2946 |     }
2947 | 
2948 |     interface ReactDOM extends ReactHTML, ReactSVG { }
2949 | 
2950 |     //
2951 |     // React.PropTypes
2952 |     // ----------------------------------------------------------------------
2953 | 
2954 |     type Validator<T> = PropTypes.Validator<T>;
2955 | 
2956 |     type Requireable<T> = PropTypes.Requireable<T>;
2957 | 
2958 |     type ValidationMap<T> = PropTypes.ValidationMap<T>;
2959 | 
2960 |     type WeakValidationMap<T> = {
2961 |         [K in keyof T]?: null extends T[K]
2962 |             ? Validator<T[K] | null | undefined>
2963 |             : undefined extends T[K]
2964 |             ? Validator<T[K] | null | undefined>
2965 |             : Validator<T[K]>
2966 |     };
2967 | 
2968 |     interface ReactPropTypes {
2969 |         any: typeof PropTypes.any;
2970 |         array: typeof PropTypes.array;
2971 |         bool: typeof PropTypes.bool;
2972 |         func: typeof PropTypes.func;
2973 |         number: typeof PropTypes.number;
2974 |         object: typeof PropTypes.object;
2975 |         string: typeof PropTypes.string;
2976 |         node: typeof PropTypes.node;
2977 |         element: typeof PropTypes.element;
2978 |         instanceOf: typeof PropTypes.instanceOf;
2979 |         oneOf: typeof PropTypes.oneOf;
2980 |         oneOfType: typeof PropTypes.oneOfType;
2981 |         arrayOf: typeof PropTypes.arrayOf;
2982 |         objectOf: typeof PropTypes.objectOf;
2983 |         shape: typeof PropTypes.shape;
2984 |         exact: typeof PropTypes.exact;
2985 |     }
2986 | 
2987 |     //
2988 |     // React.Children
2989 |     // ----------------------------------------------------------------------
2990 | 
2991 |     interface ReactChildren {
2992 |         map<T, C>(children: C | ReadonlyArray<C>, fn: (child: C, index: number) => T):
2993 |             C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;
2994 |         forEach<C>(children: C | ReadonlyArray<C>, fn: (child: C, index: number) => void): void;
2995 |         count(children: any): number;
2996 |         only<C>(children: C): C extends any[] ? never : C;
2997 |         toArray(children: ReactNode | ReactNode[]): Array<Exclude<ReactNode, boolean | null | undefined>>;
2998 |     }
2999 | 
3000 |     //
3001 |     // Browser Interfaces
3002 |     // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
3003 |     // ----------------------------------------------------------------------
3004 | 
3005 |     interface AbstractView {
3006 |         styleMedia: StyleMedia;
3007 |         document: Document;
3008 |     }
3009 | 
3010 |     interface Touch {
3011 |         identifier: number;
3012 |         target: EventTarget;
3013 |         screenX: number;
3014 |         screenY: number;
3015 |         clientX: number;
3016 |         clientY: number;
3017 |         pageX: number;
3018 |         pageY: number;
3019 |     }
3020 | 
3021 |     interface TouchList {
3022 |         [index: number]: Touch;
3023 |         length: number;
3024 |         item(index: number): Touch;
3025 |         identifiedTouch(identifier: number): Touch;
3026 |     }
3027 | 
3028 |     //
3029 |     // Error Interfaces
3030 |     // ----------------------------------------------------------------------
3031 |     interface ErrorInfo {
3032 |         /**
3033 |          * Captures which component contained the exception, and its ancestors.
3034 |          */
3035 |         componentStack: string;
3036 |     }
3037 | }
3038 | 
3039 | // naked 'any' type in a conditional type will short circuit and union both the then/else branches
3040 | // so boolean is only resolved for T = any
3041 | type IsExactlyAny<T> = boolean extends (T extends never ? true : false) ? true : false;
3042 | 
3043 | type ExactlyAnyPropertyKeys<T> = { [K in keyof T]: IsExactlyAny<T[K]> extends true ? K : never }[keyof T];
3044 | type NotExactlyAnyPropertyKeys<T> = Exclude<keyof T, ExactlyAnyPropertyKeys<T>>;
3045 | 
3046 | // Try to resolve ill-defined props like for JS users: props can be any, or sometimes objects with properties of type any
3047 | type MergePropTypes<P, T> =
3048 |     // Distribute over P in case it is a union type
3049 |     P extends any
3050 |         // If props is type any, use propTypes definitions
3051 |         ? IsExactlyAny<P> extends true ? T :
3052 |             // If declared props have indexed properties, ignore inferred props entirely as keyof gets widened
3053 |             string extends keyof P ? P :
3054 |                 // Prefer declared types which are not exactly any
3055 |                 & Pick<P, NotExactlyAnyPropertyKeys<P>>
3056 |                 // For props which are exactly any, use the type inferred from propTypes if present
3057 |                 & Pick<T, Exclude<keyof T, NotExactlyAnyPropertyKeys<P>>>
3058 |                 // Keep leftover props not specified in propTypes
3059 |                 & Pick<P, Exclude<keyof P, keyof T>>
3060 |         : never;
3061 | 
3062 | // Any prop that has a default prop becomes optional, but its type is unchanged
3063 | // Undeclared default props are augmented into the resulting allowable attributes
3064 | // If declared props have indexed properties, ignore default props entirely as keyof gets widened
3065 | // Wrap in an outer-level conditional type to allow distribution over props that are unions
3066 | type Defaultize<P, D> = P extends any
3067 |     ? string extends keyof P ? P :
3068 |         & Pick<P, Exclude<keyof P, keyof D>>
3069 |         & Partial<Pick<P, Extract<keyof P, keyof D>>>
3070 |         & Partial<Pick<D, Exclude<keyof D, keyof P>>>
3071 |     : never;
3072 | 
3073 | type ReactManagedAttributes<C, P> = C extends { propTypes: infer T; defaultProps: infer D; }
3074 |     ? Defaultize<MergePropTypes<P, PropTypes.InferProps<T>>, D>
3075 |     : C extends { propTypes: infer T; }
3076 |         ? MergePropTypes<P, PropTypes.InferProps<T>>
3077 |         : C extends { defaultProps: infer D; }
3078 |             ? Defaultize<P, D>
3079 |             : P;
3080 | 
3081 |              // must be synchronous
3082 |   export type TransitionFunction = () => VoidOrUndefinedOnly
3083 |   // strange definition to allow vscode to show documentation on the invocation
3084 |   export interface TransitionStartFunction {
3085 |     /**
3086 |      * State updates caused inside the callback are allowed to be deferred.
3087 |      *
3088 |      * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
3089 |      *
3090 |      * @param callback A _synchronous_ function which causes state updates that can be deferred.
3091 |      */
3092 |     (callback: TransitionFunction): void
3093 |   }
3094 | 
3095 |   /**
3096 |    * Returns a deferred version of the value that may “lag behind” it for at most `timeoutMs`.
3097 |    *
3098 |    * This is commonly used to keep the interface responsive when you have something that renders immediately
3099 |    * based on user input and something that needs to wait for a data fetch.
3100 |    *
3101 |    * A good example of this is a text input.
3102 |    *
3103 |    * @param value The value that is going to be deferred
3104 |    *
3105 |    * @see https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue
3106 |    */
3107 |   export function useDeferredValue<T>(value: T): T
3108 | 
3109 |   /**
3110 |    * Allows components to avoid undesirable loading states by waiting for content to load
3111 |    * before transitioning to the next screen. It also allows components to defer slower,
3112 |    * data fetching updates until subsequent renders so that more crucial updates can be
3113 |    * rendered immediately.
3114 |    *
3115 |    * The `useTransition` hook returns two values in an array.
3116 |    *
3117 |    * The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish.
3118 |    * The second is a function that takes a callback. We can use it to tell React which state we want to defer.
3119 |    *
3120 |    * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
3121 |    *
3122 |    * @param config An optional object with `timeoutMs`
3123 |    *
3124 |    * @see https://reactjs.org/docs/concurrent-mode-reference.html#usetransition
3125 |    */
3126 |   export function useTransition(): [boolean, TransitionStartFunction]
3127 | 
3128 |   /**
3129 |    * Similar to `useTransition` but allows uses where hooks are not available.
3130 |    *
3131 |    * @param callback A _synchronous_ function which causes state updates that can be deferred.
3132 |    */
3133 |   export function startTransition(scope: TransitionFunction): void
3134 | 
3135 |   export function useId(): string
3136 | 
3137 |   /**
3138 |    * @param effect Imperative function that can return a cleanup function
3139 |    * @param deps If present, effect will only activate if the values in the list change.
3140 |    *
3141 |    * @see https://github.com/facebook/react/pull/21913
3142 |    */
3143 |   export function useInsertionEffect(
3144 |     effect: EffectCallback,
3145 |     deps?: DependencyList,
3146 |   ): void
3147 | 
3148 |   /**
3149 |    * @param subscribe
3150 |    * @param getSnapshot
3151 |    *
3152 |    * @see https://github.com/reactwg/react-18/discussions/86
3153 |    */
3154 |   // keep in sync with `useSyncExternalStore` from `use-sync-external-store`
3155 |   export function useSyncExternalStore<Snapshot>(
3156 |     subscribe: (onStoreChange: () => void) => () => void,
3157 |     getSnapshot: () => Snapshot,
3158 |     getServerSnapshot?: () => Snapshot,
3159 |   ): Snapshot


--------------------------------------------------------------------------------
/src/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json",
3 |   "exclude": ["__tests__/**/*.ts"]
4 | }
5 | 


--------------------------------------------------------------------------------
/src/tsconfig.cjs.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.build.json",
3 |   "compilerOptions": {
4 |     "module": "CommonJS",
5 |     "outDir": "../lib"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "declaration": true,
 5 |     "outDir": "../esm",
 6 |     "baseUrl": ".",
 7 |     "jsx": "react"
 8 |   },
 9 |   "exclude": ["./react-types"]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export {}
2 | 


--------------------------------------------------------------------------------
/src/wrapper.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable react-hooks/rules-of-hooks */
  2 | import {
  3 |   Fragment,
  4 |   FunctionComponent,
  5 |   ReactNode,
  6 |   createElement,
  7 |   forwardRef,
  8 |   useEffect,
  9 |   useMemo,
 10 |   useRef,
 11 |   useState,
 12 | } from 'react'
 13 | import { Root, createRoot } from 'react-dom/client'
 14 | import {
 15 |   PropType,
 16 |   Ref,
 17 |   RendererElement,
 18 |   RendererNode,
 19 |   VNode,
 20 |   createApp,
 21 |   defineComponent,
 22 |   h,
 23 |   isReactive,
 24 |   isRef,
 25 |   onMounted,
 26 |   onUnmounted,
 27 |   ref,
 28 |   watch,
 29 | } from 'vue'
 30 | 
 31 | type WithChildren<C> = C & { children?: ReactNode | ReactNode[] }
 32 | export function createReactWrapper<P extends {}>(
 33 |   Component: FunctionComponent<P>,
 34 |   propsReactive?: Ref<WithChildren<P>> | WithChildren<P>,
 35 |   children?: React.ReactNode[],
 36 | ) {
 37 |   const propsIsVueRef = isRef(propsReactive)
 38 | 
 39 |   if (
 40 |     typeof propsReactive === 'object' &&
 41 |     !isReactive(propsReactive) &&
 42 |     !propsIsVueRef
 43 |   ) {
 44 |     throw new Error('props must be reactive')
 45 |   }
 46 | 
 47 |   return defineComponent({
 48 |     props: {
 49 |       reactRef: {
 50 |         type: Object as PropType<() => Ref<any> | Ref<any>>,
 51 |         required: false,
 52 |       },
 53 |       onReactMount: {
 54 |         type: Function as PropType<() => () => void | void | undefined>,
 55 |         required: false,
 56 |       },
 57 |       onReactUnmount: {
 58 |         type: Function as PropType<() => void>,
 59 |         required: false,
 60 |       },
 61 |       // onReactReRender: {
 62 |       // }
 63 |     },
 64 |     emits: ['react-mount', 'react-unmount'],
 65 |     setup(vueRootProps, ctx) {
 66 |       const containerRef = ref(null)
 67 |       // NOTE: this $ref is not reactive, because this is unnecessary
 68 |       const $ref = vueRootProps.reactRef
 69 |         ? isRef(vueRootProps.reactRef)
 70 |           ? vueRootProps.reactRef
 71 |           : vueRootProps.reactRef?.()
 72 |         : undefined
 73 |       let reactDOMRoot: Root | null = null
 74 | 
 75 |       const { emit, expose } = ctx
 76 | 
 77 |       expose({
 78 |         containerRef,
 79 |       })
 80 | 
 81 |       onMounted(() => {
 82 |         if (!containerRef.value) {
 83 |           return
 84 |         }
 85 | 
 86 |         const wrapperReact = forwardRef<any, P>((props, ref) => {
 87 |           const [state, setState] = useState(props)
 88 | 
 89 |           // mount
 90 |           useEffect(() => {
 91 |             emit('react-mount')
 92 |             return vueRootProps.onReactMount?.()
 93 |           }, [])
 94 |           // unmount
 95 |           useEffect(() => {
 96 |             emit('react-unmount')
 97 |             return vueRootProps.onReactUnmount
 98 |           }, [])
 99 | 
100 |           useEffect(() => {
101 |             if (propsReactive) {
102 |               const clean = watch(
103 |                 () => (propsIsVueRef ? propsReactive.value : propsReactive),
104 |                 (newProps) => {
105 |                   setState({ ...newProps } as any as P)
106 |                 },
107 |                 {
108 |                   deep: true,
109 |                 },
110 |               )
111 | 
112 |               return clean
113 |             }
114 |           }, [])
115 |           const childrenRef = useRef(null)
116 |           useEffect(() => {
117 |             if (ctx.slots.default && childrenRef.current) {
118 |               const defaults = ctx.slots.default()
119 |               const app = createApp(
120 |                 defineComponent({
121 |                   setup() {
122 |                     return () => h('div', defaults)
123 |                   },
124 |                 }),
125 |               )
126 |               app.mount(childrenRef.current)
127 | 
128 |               return () => {
129 |                 app.unmount()
130 |               }
131 |             }
132 |           }, [])
133 | 
134 |           const vueChildrenIntoReact = useMemo(() => {
135 |             if (ctx.slots.children) {
136 |               const node = ctx.slots.children()
137 | 
138 |               return createElement(VueRenderHelper(node))
139 |             }
140 | 
141 |             return null
142 |           }, [])
143 |           let combinedChildren: ReactNode[] | null = [
144 |             vueChildrenIntoReact,
145 |             state.children,
146 |           ].filter(Boolean)
147 |           // @ts-ignore
148 |           combinedChildren =
149 |             combinedChildren.length == 0
150 |               ? undefined
151 |               : combinedChildren.length === 1
152 |               ? combinedChildren[0]
153 |               : combinedChildren
154 | 
155 |           return createElement(Fragment, null, [
156 |             createElement(
157 |               Component,
158 |               isRef($ref)
159 |                 ? {
160 |                     ...state,
161 |                     ref(ref: any) {
162 |                       $ref.value = ref
163 |                     },
164 |                   }
165 |                 : state,
166 |               combinedChildren,
167 |             ),
168 | 
169 |             createElement('div', {
170 |               ref: childrenRef,
171 |             }),
172 |           ])
173 |         })
174 |         reactDOMRoot = createRoot(containerRef.value)
175 | 
176 |         if (propsIsVueRef) {
177 |           reactDOMRoot!.render(
178 |             createElement(
179 |               wrapperReact,
180 |               // @ts-ignore
181 |               {
182 |                 ...(propsReactive.value as any as P),
183 |               },
184 |               propsReactive.value?.children ?? children,
185 |             ),
186 |           )
187 |         } else {
188 |           reactDOMRoot!.render(
189 |             createElement(
190 |               wrapperReact,
191 |               // @ts-ignore
192 |               {
193 |                 ...(propsReactive as any as P),
194 |               },
195 |               propsReactive?.children ?? children,
196 |             ),
197 |           )
198 |         }
199 |       })
200 | 
201 |       onUnmounted(() => {
202 |         if (reactDOMRoot) {
203 |           reactDOMRoot.unmount()
204 |         }
205 |       })
206 | 
207 |       return () => h('div', { ref: containerRef })
208 |     },
209 |   })
210 | }
211 | 
212 | const VueRenderHelper =
213 |   (
214 |     vnode:
215 |       | VNode
216 |       | VNode<
217 |           RendererNode,
218 |           RendererElement,
219 |           {
220 |             [key: string]: any
221 |           }
222 |         >[],
223 |   ) =>
224 |   () => {
225 |     const ref = useRef(null)
226 | 
227 |     useEffect(() => {
228 |       if (!ref.current || !vnode) {
229 |         return
230 |       }
231 |       const vueInstance = createApp(
232 |         defineComponent({
233 |           setup() {
234 |             return () => vnode
235 |           },
236 |         }),
237 |       )
238 |       vueInstance.mount(ref.current)
239 | 
240 |       return () => {
241 |         vueInstance.unmount()
242 |       }
243 |     }, [])
244 |     return createElement('div', {
245 |       ref,
246 |     })
247 |   }
248 | 
249 | /** @deprecated please use createReactWrapper */
250 | export const ReactWrapper = createReactWrapper
251 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["ESNext", "DOM", "DOM.Iterable"],
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "resolveJsonModule": true,
 9 |     "esModuleInterop": true,
10 |     "skipLibCheck": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "sourceMap": true,
13 |     "declaration": true,
14 |     "outDir": "./dist",
15 |     "baseUrl": "./src",
16 |     "paths": {
17 |       "~/*": ["*"]
18 |     },
19 |     "plugins": [
20 |       {
21 |         "transform": "@zerollup/ts-transform-paths"
22 |       }
23 |     ]
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import unocss from 'unocss/vite'
 2 | import { defineConfig } from 'vite'
 3 | import tsconfigPaths from 'vite-tsconfig-paths'
 4 | 
 5 | import { presetWind } from '@unocss/preset-wind'
 6 | import vue from '@vitejs/plugin-vue'
 7 | 
 8 | const { resolve } = require('path')
 9 | 
10 | export default defineConfig({
11 |   base: '',
12 |   plugins: [
13 |     unocss({
14 |       presets: [presetWind()],
15 |     }),
16 |     tsconfigPaths({
17 |       projects: [
18 |         resolve(__dirname, './example/tsconfig.json'),
19 |         resolve(__dirname, './tsconfig.json'),
20 |       ],
21 |     }),
22 |     vue(),
23 |   ],
24 |   define: {
25 |     global: 'window',
26 |     'process.env': {},
27 |   },
28 |   root: resolve(__dirname, './example'),
29 |   build: {
30 |     rollupOptions: {
31 |       input: {
32 |         main: resolve(__dirname, './example/index.html'),
33 |       },
34 |     },
35 |   },
36 | })
37 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import tsPath from 'vite-tsconfig-paths'
 2 | import { defineConfig } from 'vitest/config'
 3 | 
 4 | // eslint-disable-next-line import/no-default-export
 5 | export default defineConfig({
 6 |   test: {
 7 |     globals: true,
 8 |     include: ['src/__tests__/**/*.(spec|test).ts'],
 9 |   },
10 |   plugins: [tsPath()],
11 | })
12 | 


--------------------------------------------------------------------------------