2.1.0 tsx attribute types, in class render

Author: ruojianll

docs/_sidebar.md

@@ -15,4 +15,6 @@
 - Inheritance
     - [ECMAScript class](inheritance/es-class/es-class.md)
     - [Component](inheritance/component/component.md)
-    - [Complex example](inheritance/complex-example/complex-example.md)
+    - [Complex example](inheritance/complex-example/complex-example.md)
+- TSX
+    - [Attribute types](tsx/attribute-types/attribute-types.md)

docs/class-component/component-property/code-option-type.ts

@@ -18,5 +18,5 @@ export default class MyComponent extends Vue {
     @Prop({
         type: String
     })
-    p!: string
+    p?: string
 }

docs/class-component/component-property/code-option-validator.ts

@@ -22,5 +22,5 @@ export default class MyComponent extends Vue {
             return true
         }
     })
-    p!: string
+    p?: string
 }

docs/class-component/component-property/code-usage.ts

@@ -16,5 +16,5 @@ Vue option component
 @Component
 export default class MyComponent extends Vue {
     @Prop
-    p!: string
+    p?: string
 }

docs/class-component/component/component.md

@@ -54,6 +54,8 @@ This is the `render` in vue option component api.
 
 If you use vue Single-File component. The render will be applied to the `export default` component automatically.
 
+> This will overwrite the render in class body.
+
 [](./code-option-template.ts ':include :type=code typescript')
 
 ### template

docs/class-component/event/event.md

@@ -1,6 +1,6 @@
 ## Usage
 
-You could define a method which triggers a vue event by `Emit` decorator.
+We could define a method which triggers a vue event by `Emit` decorator.
 
 The decorator received an optional event name paramater. Event will be triggered with this name and the method returned value. If the event name parameter is omitted, use method's name by default.
 

docs/class-component/lifecycle-hook/lifecycle-hook.md

@@ -23,10 +23,13 @@ Class component supports almost all lifecycle hooks in vanilla vue. Write then a
     "renderTracked",
     "renderTriggered",
     "errorCaptured",
-    "serverPrefetch"
+    "serverPrefetch",
+    "render"
 ]
 ```
 
+All these hooks must be methods of a class, not properties.
+
 ## For other names
 
 If your hook names aren't in the above list. You could use `options` or `modifier` in `Component` decorator.

docs/class-component/method/method.md

@@ -1,5 +1,5 @@
 ## Usage
 
-In a class component, you could define methods of vue option component as class methods directly. Library will analyze methods and transform them into `methods` option.
+In a class component, we could define methods of vue option component as class methods directly. Library will analyze methods and transform them into `methods` option.
 
 [](./code-usage.ts ':include :type=code typescript')

docs/tsconfig.json

@@ -29,5 +29,6 @@
     },
     "include": [
         "./**/*.ts",
+        "./**/*.tsx",
     ],
 }

docs/tsx/attribute-types/attribute-types.md

@@ -0,0 +1,28 @@
+## Usage
+
+To make enable TSX attribute types:
+
+1. Import `TSX` function from this repo.
+
+2. Define an interface(i.e. `Props`) to decribe properties in component.
+
+3. Make your component extend from `TSX<Props>()(BaseComponent)`.
+
+> There are two `()`s after `TSX<Props>`.
+
+[](./code-usage.tsx ':include :type=code tsx')
+
+## Type checking
+
+We could check if component implements properties by `implements`.
+
+[](./code-type-checking.tsx ':include :type=code tsx')
+
+## Component inheritance
+
+TSX attributes supports component inheritance.
+
+[](./code-component-inheritance.tsx ':include :type=code tsx')
+
+
+

docs/tsx/attribute-types/code-component-inheritance.tsx

@@ -0,0 +1,29 @@
+import { TSX, Prop, Component, ComponentBase, Vue } from 'vue-facing-decorator'
+
+interface BaseProps {
+    propNumber: number
+}
+
+@ComponentBase
+class MyBaseComponent extends TSX<BaseProps>()(Vue) implements BaseProps {
+    @Prop({
+        required: true
+    })
+    propNumber!: number
+}
+
+interface Props {
+    propString: string
+}
+
+@Component
+export default class MyComponent extends TSX<Props>()(MyBaseComponent) implements Props {
+    @Prop({
+        required: true
+    })
+    propString!: string
+}
+
+function render() {
+    return <MyComponent propString='foobar' propNumber={1}></MyComponent>
+}

docs/tsx/attribute-types/code-type-checking.tsx

@@ -0,0 +1,17 @@
+import { TSX, Prop, Component, Vue } from 'vue-facing-decorator'
+
+interface Props {
+    propString: string
+}
+
+@Component
+export default class MyComponent extends TSX<Props>()(Vue) implements Props {
+    @Prop({
+        required: true
+    })
+    propString!: string
+}
+
+function render() {
+    return <MyComponent propString='foobar'></MyComponent>
+}

docs/tsx/attribute-types/code-usage.tsx

@@ -0,0 +1,18 @@
+import { TSX, Prop, Component, Vue } from 'vue-facing-decorator'
+
+interface Props {
+    propString: string
+}
+
+@Component
+export default class MyComponent extends TSX<Props>()(Vue) {
+    @Prop({
+        required: true
+    })
+    propString!: string
+}
+
+//Typescript will check component attributes in tsx.
+function render() {
+    return <MyComponent propString='foobar'></MyComponent>
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-facing-decorator",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "Vue typescript class and decorator based component.",
   "main": "dist/index.js",
   "keywords": [

src/index.ts

@@ -7,17 +7,21 @@ export { decorator as Inject } from './option/inject'
 export { decorator as Emit } from './option/emit'
 export { decorator as VModel } from './option/vmodel'
 import type {
-    ComponentPublicInstance,
-    ComponentOptions
+    ComponentPublicInstance
 } from 'vue'
 const IdentifySymbol = Symbol('vue-facing-decorator-identify')
 export interface BaseTypeIdentify {
     [IdentifySymbol]: undefined
 }
+export function TSX<Properties extends {}>() {
+    return function <C extends { new(): ComponentPublicInstance & BaseTypeIdentify }>(cons: C) {
+        return cons as unknown as {
+            new(): Omit<ComponentPublicInstance<(InstanceType<C>['$props']) & Properties>, keyof Properties> & InstanceType<C>//& ComponentPublicInstance & BaseTypeIdentify
+        }
+    }
+}
 
 export const Base = class { } as {
     new(): ComponentPublicInstance & BaseTypeIdentify
 }
-
-
 export const Vue = Base

src/option/methodsAndLifecycle.ts

@@ -17,7 +17,8 @@ export const LifecycleNames = [
     "renderTracked",
     "renderTriggered",
     "errorCaptured",
-    "serverPrefetch"
+    "serverPrefetch",
+    "render"
 ] as const
 
 export function build(cons: Cons, optionBuilder: OptionBuilder) {

test/test.ts

@@ -12,4 +12,6 @@ import './option/vmodel'
 import './feature/lifecycle'
 import './feature/classExtends'
 import './feature/componentExtends'
-import './feature/extends'
+import './feature/extends'
+
+import './tsx/attributeTypes'

test/tsx/attributeTypes.ts

@@ -0,0 +1,13 @@
+import { Component, TSX, Prop, Base } from '../../dist'
+interface Props {
+    p: string
+}
+@Component
+class TsxAttributeTypes extends TSX<Props>()(Base) implements Props {
+    @Prop({
+        required: true
+    })
+    p!: string
+}
+
+export default {}