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 */`

diff --git a/packages/dts-test/utils.d.ts b/packages/dts-test/utils.d.ts
index 012f9772954e2b012a22c51c5ba4d5f5281675b4..790098d962d7185a4c4ad250d78acd6d100532ff 100644 (file)
--- a/packages/dts-test/utils.d.ts
+++ b/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
 

diff --git a/packages/runtime-dom/types/jsx.d.ts b/packages/vue/jsx-runtime/dom.d.ts
similarity index 97%
rename from packages/runtime-dom/types/jsx.d.ts
rename to packages/vue/jsx-runtime/dom.d.ts
index b5e1487151e91572375f615a7798f74f513ee631..c4da2cdd08a8382692c0a6284eead30e0b3d292b 100644 (file)
--- a/packages/runtime-dom/types/jsx.d.ts
+++ b/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 {}

diff --git a/packages/vue/jsx-runtime/index.d.ts b/packages/vue/jsx-runtime/index.d.ts
new file mode 100644 (file)
index 0000000..7a32d64
--- /dev/null
+++ b/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: {}
+  }
+}

diff --git a/packages/vue/jsx-runtime/index.js b/packages/vue/jsx-runtime/index.js
new file mode 100644 (file)
index 0000000..703b7fe
--- /dev/null
+++ b/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

diff --git a/packages/vue/jsx-runtime/index.mjs b/packages/vue/jsx-runtime/index.mjs
new file mode 100644 (file)
index 0000000..12f3780
--- /dev/null
+++ b/packages/vue/jsx-runtime/index.mjs
@@ -0,0 +1 @@
+export { h as jsx, h as jsxDEV, Fragment } from 'vue'

diff --git a/packages/vue/jsx-runtime/package.json b/packages/vue/jsx-runtime/package.json
new file mode 100644 (file)
index 0000000..778c7eb
--- /dev/null
+++ b/packages/vue/jsx-runtime/package.json
@@ -0,0 +1,5 @@
+{
+  "main": "index.js",
+  "module": "index.mjs",
+  "types": "index.d.ts"
+}

diff --git a/packages/vue/jsx.d.ts b/packages/vue/jsx.d.ts
new file mode 100644 (file)
index 0000000..a33c0ad
--- /dev/null
+++ b/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 {}

diff --git a/packages/vue/package.json b/packages/vue/package.json
index 449fed7989afca74bd019ac314156abae1b6634f..39acb8faa8f6b87065d2830afbca460e4ee8544a 100644 (file)
--- a/packages/vue/package.json
+++ b/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",

diff --git a/tsconfig.json b/tsconfig.json
index 15e013c5fa0e2ba793d33e752dd945b8d71b6e16..bbe12407bc15efb11bdd474943922e1352cbea64 100644 (file)
--- a/tsconfig.json
+++ b/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"
   ]
 }