createDecorator

Author: ruojianll

docs/en/_sidebar.md

@@ -20,5 +20,7 @@
 - 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)

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')

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
@@ -85,6 +87,12 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
         emits = Array.from(new Set([...emits, ...arg.emits]))
     }
     option.emits = emits
+
+
+    CustomRecords.forEach(rec => {
+        rec.creator.apply({}, [option, rec.key])
+    })
+
     if (arg.setup) {
         if (!option.setup) {
             option.setup = 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'

test/custom/custom.ts

@@ -0,0 +1,41 @@
+
+import { expect } from 'chai';
+import 'mocha';
+import { Component, Base, createDecorator } from '../../dist'
+
+function CustomDeco(param?: String) {
+    return createDecorator(function (options: any, key: string) {
+        options.methods ??= {}
+        const old: Function = options.methods[key]
+        if (!old) {
+            throw 'method not found'
+        }
+        options.methods[key] = function (...args: any[]) {
+            return `${old.apply(this, args)} ${param}`
+        }
+    })
+}
+
+@Component
+export class Comp extends Base {
+    @CustomDeco('DecoParam')
+    method(this: any, param: string) {
+        this.contextKey = 'contextValue'
+        return `method return value ${param}`
+    }
+}
+
+const CompContext = Comp as any
+
+describe('create decorator',
+    () => {
+        it('default', () => {
+            expect('function').to.equal(typeof (CompContext.methods?.method))
+            const context: any = {}
+            const ret = CompContext.methods?.method.apply(context, ['Param'])
+            expect('contextValue').to.equal(context.contextKey)
+            expect('method return value Param DecoParam').to.equal(ret)
+        })
+    }
+)
+export default {}

test/test.ts

@@ -19,5 +19,6 @@ import './feature/componentExtends'
 import './feature/extends'
 import './feature/mixinsFunction'
 
+import './tsx/attributeTypes'
 
-import './tsx/attributeTypes'
+import './custom/custom'