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

…7958)

- No longer implicitly register global JSX types by default
  - This avoid conflict when using Vue in the same project with React
  - Global registration must now be done by explicitly importing /
    referencing `vue/jsx`, or listing it in `compilerOptions.types`.
- Add `vue/jsx-runtime` to support `jsxImportSource` usage
  - Can enable globally by setting `compilerOptions.jsxImportSource` to `'vue'`
  - Can also opt-in per-file with `/** @jsxImportSource vue */`

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"
   ]
 }