merge

Author: ruojianll

docs/en/_sidebar.md

@@ -20,6 +20,8 @@
 - TSX
     - [TSX render](/en/tsx/tsx-render/tsx-render.md)
     - [Attribute types](/en/tsx/attribute-types/attribute-types.md)
+- Custom Decorator
+    - [Custom Decorator](/en/custom/custom.md)
 - Compatibility
     - [reflect-metadata](/en/compatibility/reflect-metadata/reflect-metadata.md)
 - Next version

docs/en/custom/code-usage.ts

@@ -0,0 +1,21 @@
+import { createDecorator, Component, Vue } from 'vue-facing-decorator'
+
+function Log(prefix: string) {
+    return createDecorator(function (options, key) {
+        const old = options.methods?.[key]
+        if (!old) {
+            throw 'not found'
+        }
+        options.methods[key] = function (...args: any[]) {
+            old.apply(this, args)
+        }
+    })
+}
+
+@Component
+export default class Comp extends Vue {
+    @Log('prefix')
+    method() {
+
+    }
+}

docs/en/custom/custom.md

@@ -0,0 +1,11 @@
+## Usage
+
+Use `createDecorator` to build your own decorators. 
+
+If you are a package author, install vue-facing-decorator as `devDependecies` and mark it in `peerDependencies`.
+
+`createDecorator` received a creator function, which accepts tow parameters: 
+1. Generated vue options component, you can modify it to implement anything you want.
+2. The key of class property(or method) which decorator decorated.
+
+[](./code-usage.ts ':include :type=code typescript')

docs/zh-cn/_sidebar.md

@@ -20,5 +20,7 @@
 - TSX
     - [TSX](/zh-cn/tsx/tsx-render/tsx-render.md)
     - [属性类型](/zh-cn/tsx/attribute-types/attribute-types.md)
+- 自定义装饰器
+    - [自定义装饰器](/zh-cn/custom/custom.md)
 - 兼容性
     - [reflect-metadata](/zh-cn/compatibility/reflect-metadata/reflect-metadata.md)

docs/zh-cn/custom/code-usage.ts

@@ -0,0 +1,21 @@
+import { createDecorator, Component, Vue } from 'vue-facing-decorator'
+
+function Log(prefix: string) {
+    return createDecorator(function (options, key) {
+        const old = options.methods?.[key]
+        if (!old) {
+            throw 'not found'
+        }
+        options.methods[key] = function (...args: any[]) {
+            old.apply(this, args)
+        }
+    })
+}
+
+@Component
+export default class Comp extends Vue {
+    @Log('prefix')
+    method() {
+
+    }
+}

docs/zh-cn/custom/custom.md

@@ -0,0 +1,11 @@
+## 用法
+
+使用 `createDecorator` 构建你自己的装饰器. 
+
+如果你是一位包作者，请将 vue-facing-decorator 安装到 `devDependecies` 中，并在 `peerDependencies` 中列出它。
+
+`createDecorator` 接收一个函数，这个函数接收两个参数：
+1. 生成的Vue options组件，你可以修改这个参数来实现你想实现的功能。
+2. 装饰器所装饰的类属性（或方法）名。
+
+[](../../en//custom/code-usage.ts ':include :type=code typescript')

package.json

@@ -1,6 +1,10 @@
 {
   "name": "vue-facing-decorator",
+<<<<<<< HEAD
   "version": "3.0.0-beta.2",
+=======
+  "version": "2.1.20",
+>>>>>>> master
   "description": "Vue typescript class and decorator based component.",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",

src/component.ts

@@ -11,6 +11,7 @@ import { build as optionInject } from './option/inject'
 import { build as optionEmit } from './option/emit'
 import { build as optionVModel } from './option/vmodel'
 import { build as optionAccessor } from './option/accessor'
+import { CustomRecords } from './custom/custom'
 import type { SetupContext } from 'vue';
 import type { OptionBuilder } from './optionBuilder'
 import type { VueCons } from './index'
@@ -33,6 +34,7 @@ function ComponentOption(cons: Cons, extend?: any) {
     optionMethodsAndHooks(cons, optionBuilder)//after Ref Computed
     optionAccessor(cons, optionBuilder)
 
+
     const setupFunction: OptionSetupFunction | undefined = optionBuilder.setup ? function (props, ctx) {
         return optionBuilder.setup!(props, ctx)
     } : undefined
@@ -86,13 +88,18 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
         emits = Array.from(new Set([...emits, ...arg.emits]))
     }
     option.emits = emits
-    arg.setup ??= function () { return {} }
 
-    if (!option.setup) {
 
+    CustomRecords.forEach(rec => {
+        rec.creator.apply({}, [option, rec.key])
+    })
+
+
+    arg.setup ??= function () { return {} }
+    if (!option.setup) {
         option.setup = arg.setup
     } else {
-   
+
         const oldSetup: OptionSetupFunction = option.setup
         const newSetup: ComponentSetupFunction = arg.setup
 

src/custom/custom.ts

@@ -0,0 +1,19 @@
+type Creator = { (options: any, key: string): void }
+interface Record {
+    key: string
+    creator: Creator
+}
+
+// const CustomDecorators: CustomDecorator[] = []
+export const CustomRecords: Record[] = []
+
+export function createDecorator(creator: Creator) {
+    return function (proto: any, key: string) {
+        CustomRecords.push({
+            key,
+            creator
+        })
+    }
+}
+
+

src/index.ts

@@ -8,6 +8,7 @@ export { decorator as Emit } from './option/emit'
 export { decorator as VModel, decorator as Model } from './option/vmodel'
 export { decorator as Vanilla } from './option/vanilla'
 export { decorator as Hook } from './option/methodsAndHooks'
+export { createDecorator } from './custom/custom'
 export { mixins } from './mixins'
 import type { ComponentPublicInstance } from 'vue'
 import type { OptionBuilder } from './optionBuilder'