feat(types/jsx): support jsxImportSource, avoid global JSX conflict

packages/dts-test/utils.d.ts

@@ -1,6 +1,9 @@
 // This directory contains a number of d.ts assertions
 // use \@ts-expect-error where errors are expected.
 
+// register global JSX
+import 'vue/jsx'
+
 export function describe(_name: string, _fn: () => void): void
 export function test(_name: string, _fn: () => any): void
 

packages/runtime-dom/types/jsx.d.ts → packages/vue/jsx-runtime/dom.d.ts

@@ -26,7 +26,6 @@
 // Kanitkorn Sujautra <https://github.com/lukyth>
 // Sebastian Silbermann <https://github.com/eps1lon>
 
-import { VNode } from '@vue/runtime-core'
 import * as CSS from 'csstype'
 
 export interface CSSProperties
@@ -1021,7 +1020,7 @@ export interface SVGAttributes extends AriaAttributes, EventHandlers<Events> {
  zoomAndPan?: string
 }
 
-interface IntrinsicElementAttributes {
+export interface IntrinsicElementAttributes {
  a: AnchorHTMLAttributes
  abbr: HTMLAttributes
  address: HTMLAttributes
@@ -1320,43 +1319,3 @@ type EventHandlers<E> = {
  ? E[K]
  : (payload: E[K]) => void
 }
-
-// use namespace import to avoid collision with generated types which use
-// named imports.
-import * as RuntimeCore from '@vue/runtime-core'
-
-type ReservedProps = {
- key?: string | number | symbol
- ref?: RuntimeCore.VNodeRef
- ref_for?: boolean
- ref_key?: string
-}
-
-type ElementAttrs<T> = T & ReservedProps
-
-type NativeElements = {
- [K in keyof IntrinsicElementAttributes]: ElementAttrs<
- IntrinsicElementAttributes[K]
- >
-}
-
-declare global {
- namespace JSX {
- interface Element extends VNode {}
- interface ElementClass {
- $props: {}
- }
- interface ElementAttributesProperty {
- $props: {}
- }
- interface IntrinsicElements extends NativeElements {
- // allow arbitrary elements
- // @ts-ignore suppress ts:2374 = Duplicate string index signature.
- [name: string]: any
- }
- interface IntrinsicAttributes extends ReservedProps {}
- }
-}
-
-// suppress ts:2669
-export {}

packages/vue/jsx-runtime/index.d.ts

@@ -0,0 +1,40 @@
+import { VNode, VNodeRef } from '@vue/runtime-dom'
+import { IntrinsicElementAttributes } from './dom'
+
+export type ReservedProps = {
+ key?: string | number | symbol
+ ref?: VNodeRef
+ ref_for?: boolean
+ ref_key?: string
+}
+
+export type NativeElements = {
+ [K in keyof IntrinsicElementAttributes]: IntrinsicElementAttributes[K] &
+ ReservedProps
+}
+
+/**
+ * JSX namespace for usage with @jsxImportsSource directive
+ * when ts compilerOptions.jsx is 'react-jsx' or 'react-jsxdev'
+ * https://www.typescriptlang.org/tsconfig#jsxImportSource
+ */
+export { h as jsx, h as jsxDEV, Fragment } from '@vue/runtime-dom'
+
+export namespace JSX {
+ export interface Element extends VNode {}
+ export interface ElementClass {
+ $props: {}
+ }
+ export interface ElementAttributesProperty {
+ $props: {}
+ }
+ export interface IntrinsicElements extends NativeElements {
+ // allow arbitrary elements
+ // @ts-ignore suppress ts:2374 = Duplicate string index signature.
+ [name: string]: any
+ }
+ export interface IntrinsicAttributes extends ReservedProps {}
+ export interface ElementChildrenAttribute {
+ $slots: {}
+ }
+}

packages/vue/jsx-runtime/index.js

@@ -0,0 +1,4 @@
+const Vue = require('vue')
+exports.jsx = Vue.h
+exports.jsxDEV = Vue.h
+exports.Fragment = Vue.Fragment

packages/vue/jsx-runtime/index.mjs

@@ -0,0 +1 @@
+export { h as jsx, h as jsxDEV, Fragment } from 'vue'

packages/vue/jsx-runtime/package.json

@@ -0,0 +1,5 @@
+{
+ "main": "index.js",
+ "module": "index.mjs",
+ "types": "index.d.ts"
+}

packages/vue/jsx.d.ts

@@ -0,0 +1,17 @@
+// global JSX namespace registration
+import { JSX as JSXInternal } from './jsx-runtime'
+
+declare global {
+ namespace JSX {
+ interface Element extends JSXInternal.Element {}
+ interface ElementClass extends JSXInternal.ElementClass {}
+ interface ElementAttributesProperty
+ extends JSXInternal.ElementAttributesProperty {}
+ interface IntrinsicElements extends JSXInternal.IntrinsicElements {}
+ interface IntrinsicAttributes extends JSXInternal.IntrinsicAttributes {}
+ interface ElementChildrenAttribute
+ extends JSXInternal.ElementChildrenAttribute {}
+ }
+}
+
+export {}

packages/vue/package.json

@@ -13,6 +13,8 @@
  "dist",
  "compiler-sfc",
  "server-renderer",
+ "jsx-runtime",
+ "jsx.d.ts",
  "macros.d.ts",
  "macros-global.d.ts",
  "ref-macros.d.ts"
@@ -36,6 +38,14 @@
  "import": "./compiler-sfc/index.mjs",
  "require": "./compiler-sfc/index.js"
  },
+ "./jsx-runtime": {
+ "types": "./jsx-runtime/index.d.ts",
+ "import": "./jsx-runtime/index.mjs",
+ "require": "./jsx-runtime/index.js"
+ },
+ "./jsx": {
+ "types": "./jsx.d.ts"
+ },
  "./dist/*": "./dist/*",
  "./package.json": "./package.json",
  "./macros": "./macros.d.ts",

tsconfig.json

@@ -32,6 +32,7 @@
  "packages/*/src",
  "packages/runtime-dom/types/jsx.d.ts",
  "packages/*/__tests__",
- "packages/dts-test"
+ "packages/dts-test",
+ "packages/vue/jsx-runtime"
  ]
 }