types: include jsx typing

package.json

@@ -81,7 +81,8 @@
   },
   "homepage": "https://github.com/vuejs/vue#readme",
   "dependencies": {
-    "@vue/compiler-sfc": "workspace:*"
+    "@vue/compiler-sfc": "workspace:*",
+    "csstype": "^3.1.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.24.2",

pnpm-lock.yaml

@@ -15,6 +15,7 @@ importers:
       chalk: ^4.0.0
       conventional-changelog-cli: ^2.2.2
       cross-spawn: ^7.0.3
+      csstype: ^3.1.0
       de-indent: ^1.0.2
       enquirer: ^2.3.6
       esbuild: ^0.14.39
@@ -47,6 +48,7 @@ importers:
       yorkie: ^2.0.0
     dependencies:
       '@vue/compiler-sfc': link:packages/compiler-sfc
+      csstype: 3.1.0
     devDependencies:
       '@microsoft/api-extractor': 7.24.2
       '@rollup/plugin-alias': 3.1.9_rollup@2.75.3
@@ -1765,6 +1767,9 @@ packages:
       cssom: 0.3.8
     dev: true
 
+  /csstype/3.1.0:
+    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
+
   /custom-event/1.0.1:
     resolution: {integrity: sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==}
     dev: true
@@ -6415,7 +6420,8 @@ packages:
   'file:':
     resolution: {directory: '', type: directory}
     name: vue
-    version: 2.7.0-alpha.3
+    version: 2.7.0-alpha.5
     dependencies:
       '@vue/compiler-sfc': link:packages/compiler-sfc
+      csstype: 3.1.0
     dev: true

types/index.d.ts

@@ -1,5 +1,6 @@
 import { Vue } from './vue'
 import './umd'
+import './jsx'
 
 export default Vue
 

types/test/v3/tsx-test.tsx

@@ -0,0 +1,53 @@
+import { VNode, defineComponent } from '../../index'
+import { expectType } from '../utils'
+
+expectType<VNode>(<div />)
+expectType<JSX.Element>(<div />)
+expectType<JSX.Element>(<div id="foo" />)
+expectType<JSX.Element>(<input value="foo" />)
+
+// @ts-expect-error style css property validation
+expectError(<div style={{ unknown: 123 }} />)
+
+// allow array styles and nested array styles
+expectType<JSX.Element>(<div style={[{ color: 'red' }]} />)
+expectType<JSX.Element>(
+  <div style={[{ color: 'red' }, [{ fontSize: '1em' }]]} />
+)
+
+// @ts-expect-error unknown prop
+expectError(<div foo="bar" />)
+
+// allow key/ref on arbitrary element
+expectType<JSX.Element>(<div key="foo" />)
+expectType<JSX.Element>(<div ref="bar" />)
+
+expectType<JSX.Element>(
+  <input
+    onInput={e => {
+      // infer correct event type
+      expectType<EventTarget | null>(e.target)
+    }}
+  />
+)
+
+const Foo = defineComponent({
+  props: {
+    foo: String,
+    bar: {
+      type: Number,
+      required: true
+    }
+  }
+})
+
+// @ts-expect-error
+;<Foo />
+// @ts-expect-error
+;<Foo bar="1" />
+// @ts-expect-error
+;<Foo bar={1} foo={2} />
+
+// working
+;<Foo bar={1} />
+;<Foo bar={1} foo="baz" />

types/tsconfig.json

@@ -5,6 +5,8 @@
     "lib": ["dom", "esnext"],
     "types": ["node"],
     "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
     "strict": true,
     "noEmit": true,
     "baseUrl": ".",