Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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 */`
  • Loading branch information
yyx990803 committed Mar 26, 2023
1 parent 9dd98f0 commit d0b7ef3
Show file tree
Hide file tree
Showing 9 changed files with 83 additions and 43 deletions.
3 changes: 3 additions & 0 deletions 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

Expand Down
Expand Up @@ -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
Expand Down Expand Up @@ -1021,7 +1020,7 @@ export interface SVGAttributes extends AriaAttributes, EventHandlers<Events> {
zoomAndPan?: string
}

interface IntrinsicElementAttributes {
export interface IntrinsicElementAttributes {
a: AnchorHTMLAttributes
abbr: HTMLAttributes
address: HTMLAttributes
Expand Down Expand Up @@ -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 {}
40 changes: 40 additions & 0 deletions 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: {}
}
}
4 changes: 4 additions & 0 deletions 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
1 change: 1 addition & 0 deletions packages/vue/jsx-runtime/index.mjs
@@ -0,0 +1 @@
export { h as jsx, h as jsxDEV, Fragment } from 'vue'
5 changes: 5 additions & 0 deletions packages/vue/jsx-runtime/package.json
@@ -0,0 +1,5 @@
{
"main": "index.js",
"module": "index.mjs",
"types": "index.d.ts"
}
17 changes: 17 additions & 0 deletions 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 {}
10 changes: 10 additions & 0 deletions packages/vue/package.json
Expand Up @@ -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"
Expand All @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion tsconfig.json
Expand Up @@ -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"
]
}

0 comments on commit d0b7ef3

Please sign in to comment.