Skip to content

Commit e675726

Browse files
antfupikax
andauthored
chore: update jsx docs, close #568 (#573)
Co-authored-by: Carlos Rodrigues <[email protected]>
1 parent 0796912 commit e675726

File tree

2 files changed

+44
-2
lines changed

2 files changed

+44
-2
lines changed

README.md

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,28 @@ export default defineComponent({
6767

6868
### JSX/TSX
6969

70-
To make JSX/TSX work with `@vue/composition-api`, check out [babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx) by [@luwanquan](https://github.com/luwanquan).
70+
JSX is now officially supported on [vuejs/jsx](https://github.com/vuejs/jsx). You can enabled it by following [this document](https://github.com/vuejs/jsx/tree/dev/packages/babel-preset-jsx#usage). A community maintained version can be found at [babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx) by [@luwanquan](https://github.com/luwanquan).
71+
72+
To support TSX, create a declaration file with the following content in your project.
73+
74+
```ts
75+
// file: shim-tsx.d.ts
76+
import Vue, { VNode } from 'vue';
77+
import { ComponentRenderProxy } from '@vue/composition-api';
78+
79+
declare global {
80+
namespace JSX {
81+
interface Element extends VNode {}
82+
interface ElementClass extends ComponentRenderProxy {}
83+
interface ElementAttributesProperty {
84+
$props: any; // specify the property name to use
85+
}
86+
interface IntrinsicElements {
87+
[elem: string]: any;
88+
}
89+
}
90+
}
91+
```
7192

7293
## SSR
7394

README.zh-CN.md

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,28 @@ export default defineComponent({
6666

6767
### JSX/TSX
6868

69-
要使得 `@vue/composition-api` 支持 JSX/TSX,请前往查看由 [@luwanquan](https://github.com/luwanquan) 开发的 Babel 插件[babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx)
69+
JSX 现已在 [vuejs/jsx](https://github.com/vuejs/jsx) 中官方支持。你可以根据[这篇文档](https://github.com/vuejs/jsx/tree/dev/packages/babel-preset-jsx#usage)开启支持。你也可以使用由 [@luwanquan](https://github.com/luwanquan) 维护的社区版本 [babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx)
70+
71+
对于 TSX 支持,请在你的项目中创建如下声明文件:
72+
73+
```ts
74+
// file: shim-tsx.d.ts
75+
import Vue, { VNode } from 'vue';
76+
import { ComponentRenderProxy } from '@vue/composition-api';
77+
78+
declare global {
79+
namespace JSX {
80+
interface Element extends VNode {}
81+
interface ElementClass extends ComponentRenderProxy {}
82+
interface ElementAttributesProperty {
83+
$props: any; // specify the property name to use
84+
}
85+
interface IntrinsicElements {
86+
[elem: string]: any;
87+
}
88+
}
89+
}
90+
```
7091

7192
## SSR
7293

0 commit comments

Comments
 (0)