feat: export ComponentRenderProxy for tsx

Resolves: #123

Author: liximomo

README.md

@@ -13,6 +13,7 @@
 - [Installation](#Installation)
 - [Usage](#Usage)
 - [TypeScript](#TypeScript)
+  - [TSX](#tsx)
 - [Limitations](#Limitations)
 - [API](https://vue-composition-api-rfc.netlify.com/api.html)
 - [Changelog](https://github.com/vuejs/composition-api/blob/master/CHANGELOG.md)
@@ -54,7 +55,9 @@ After installing the plugin you can use the [Composition API](https://vue-compos
 
 # TypeScript
 
-**Please upgrade to the latest TypeScript. If you are using vetur, make sure to set `vetur.useWorkspaceDependencies` to `true`.**
+We provide an Example [Repository](https://github.com/liximomo/vue-composition-api-tsx-example) with TS and TSX support to help you start.
+
+**This plugin requires TypeScript version >3.5.1. If you are using vetur, make sure to set `vetur.useWorkspaceDependencies` to `true`.**
 
 To let TypeScript properly infer types inside Vue component options, you need to define components with `createComponent`:
 
@@ -71,6 +74,31 @@ const Component = {
 };
 ```
 
+## TSX
+
+To support TSX, create a declaration file with following content in your project.
+
+```ts
+// file: shim-tsx.d.ts
+import Vue, { VNode } from 'vue';
+import { ComponentRenderProxy } from '@vue/composition-api';
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends ComponentRenderProxy {}
+    interface ElementAttributesProperty {
+      $props: any; // specify the property name to use
+    }
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}
+```
+
 # Limitations
 
 ## `Ref` Unwrap
@@ -150,10 +178,10 @@ b.list[1].count === 1; // true
 ## Template Refs
 
 > :white_check_mark:
- Support     :x: Not Supported
+> Support     :x: Not Supported
 
 :white_check_mark:
- String ref && return it from `setup()`:
+String ref && return it from `setup()`:
 
 ```html
 <template>
@@ -179,7 +207,7 @@ b.list[1].count === 1; // true
 ```
 
 :white_check_mark:
- String ref && return it from `setup()` && Render Function / JSX:
+String ref && return it from `setup()` && Render Function / JSX:
 
 ```jsx
 export default {

README.zh-CN.md

@@ -13,6 +13,7 @@
 - [安装](#安装)
 - [使用](#使用)
 - [TypeScript](#TypeScript)
+  - [TSX](#tsx)
 - [限制](#限制)
 - [API](https://vue-composition-api-rfc.netlify.com/api.html)
 - [Changelog](https://github.com/vuejs/composition-api/blob/master/CHANGELOG.md)
@@ -54,6 +55,8 @@ Vue.use(VueCompositionApi);
 
 # TypeScript
 
+我们提供了一个配置好 TC/TSX 支持的[示例仓库](https://github.com/liximomo/vue-composition-api-tsx-example)来帮助你快速开始.
+
 **请使用最新版的 TypeScript，如果你使用了 `vetur`，请将 `vetur.useWorkspaceDependencies` 设为 `true`。**
 
 为了让 TypeScript 正确的推导类型，我们必须使用 `createComponent` 来定义组件:
@@ -71,6 +74,31 @@ const Component = {
 };
 ```
 
+## TSX
+
+要支持 TSX，请创建一个类型定义文件并提供正确的 JSX 定义。内容如下：
+
+```ts
+// file: shim-tsx.d.ts`
+import Vue, { VNode } from 'vue';
+import { ComponentRenderProxy } from '@vue/composition-api';
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends ComponentRenderProxy {}
+    interface ElementAttributesProperty {
+      $props: any; // specify the property name to use
+    }
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}
+```
+
 # 限制
 
 ## `Ref` Unwrap

src/component/component.ts

@@ -9,7 +9,7 @@ export type ComponentInstance = InstanceType<VueConstructor>;
 
 // public properties exposed on the proxy, which is used as the render context
 // in templates (as `this` in the render option)
-type ComponentRenderProxy<P = {}, S = {}, PublicProps = P> = {
+export type ComponentRenderProxy<P = {}, S = {}, PublicProps = P> = {
   $data: S;
   $props: PublicProps;
   $attrs: Data;

src/component/index.ts

@@ -1,2 +1,9 @@
-export { Data, createComponent, SetupFunction, SetupContext, ComponentInstance } from './component';
+export {
+  Data,
+  createComponent,
+  SetupFunction,
+  SetupContext,
+  ComponentInstance,
+  ComponentRenderProxy,
+} from './component';
 export { PropType, PropOptions } from './componentProps';

src/index.ts

@@ -23,7 +23,7 @@ if (currentVue && typeof window !== 'undefined' && window.Vue) {
 export default plugin;
 export { default as createElement } from './createElement';
 export { SetupContext };
-export { createComponent, PropType, PropOptions } from './component';
+export { createComponent, ComponentRenderProxy, PropType, PropOptions } from './component';
 
 export * from './apis/state';
 export * from './apis/lifecycle';