From d0b7ef3b61d5f83e35e5854b3c2c874e23463102 Mon Sep 17 00:00:00 2001 From: Evan You Date: Sun, 26 Mar 2023 16:40:53 +0800 Subject: [PATCH] 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 | 3 ++ .../jsx.d.ts => vue/jsx-runtime/dom.d.ts} | 43 +------------------ packages/vue/jsx-runtime/index.d.ts | 40 +++++++++++++++++ packages/vue/jsx-runtime/index.js | 4 ++ packages/vue/jsx-runtime/index.mjs | 1 + packages/vue/jsx-runtime/package.json | 5 +++ packages/vue/jsx.d.ts | 17 ++++++++ packages/vue/package.json | 10 +++++ tsconfig.json | 3 +- 9 files changed, 83 insertions(+), 43 deletions(-) rename packages/{runtime-dom/types/jsx.d.ts => vue/jsx-runtime/dom.d.ts} (97%) create mode 100644 packages/vue/jsx-runtime/index.d.ts create mode 100644 packages/vue/jsx-runtime/index.js create mode 100644 packages/vue/jsx-runtime/index.mjs create mode 100644 packages/vue/jsx-runtime/package.json create mode 100644 packages/vue/jsx.d.ts diff --git a/packages/dts-test/utils.d.ts b/packages/dts-test/utils.d.ts index 012f9772954..790098d962d 100644 --- 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 b5e1487151e..c4da2cdd08a 100644 --- a/packages/runtime-dom/types/jsx.d.ts +++ b/packages/vue/jsx-runtime/dom.d.ts @@ -26,7 +26,6 @@ // Kanitkorn Sujautra // Sebastian Silbermann -import { VNode } from '@vue/runtime-core' import * as CSS from 'csstype' export interface CSSProperties @@ -1021,7 +1020,7 @@ export interface SVGAttributes extends AriaAttributes, EventHandlers { zoomAndPan?: string } -interface IntrinsicElementAttributes { +export interface IntrinsicElementAttributes { a: AnchorHTMLAttributes abbr: HTMLAttributes address: HTMLAttributes @@ -1320,43 +1319,3 @@ type EventHandlers = { ? 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 & 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 index 00000000000..7a32d64940b --- /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 index 00000000000..703b7fe0456 --- /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 index 00000000000..12f3780b3cc --- /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 index 00000000000..778c7ebf51c --- /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 index 00000000000..a33c0ad9015 --- /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 449fed7989a..39acb8faa8f 100644 --- 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 15e013c5fa0..bbe12407bc1 100644 --- 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" ] }