@hook

Author: ruojianll

docs/en/_sidebar.md

@@ -4,7 +4,7 @@
     - [Component](/en/class-component/component/component.md)
     - [Property](/en/class-component/property/property.md)
     - [Method](/en/class-component/method/method.md)
-    - [Lifecycle hooks](/en/class-component/lifecycle-hook/lifecycle-hook.md)
+    - [Hooks](/en/class-component/hooks/hooks.md)
     - [Component property](/en/class-component/component-property/component-property.md)
     - [Accessor](/en/class-component/accessor/accessor.md)
     - [Event](/en/class-component/event/event.md)

docs/en/class-component/hooks/code-for-other-names.ts

@@ -0,0 +1,15 @@
+
+import { Component, Vue, Hook } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    myHook(){},
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Hook
+    myHook() { }
+}

docs/en/class-component/lifecycle-hook/code-usage.ts renamed to docs/en/class-component/hooks/code-usage.ts

@@ -6,7 +6,9 @@ Class component supports almost all lifecycle hooks in vanilla vue. Write them a
 
 [](./code-usage.ts ':include :type=code typescript')
 
-## Lsit of lifecycle hook names
+
+
+## Internal hook names list
 
 ```javascript
 [
@@ -32,7 +34,7 @@ Class component supports almost all lifecycle hooks in vanilla vue. Write them a
 
 ## For other names
 
-If your hook names aren't in the above list. You could use `options` or `modifier` in `Component` decorator.
+If your hook names aren't in the above list. You could use decorator `Hook`.
 
 > e.g. Hooks from `vue-router`.
 

docs/en/class-component/lifecycle-hook/lifecycle-hook.md renamed to docs/en/class-component/hooks/hooks.md

@@ -4,7 +4,7 @@
     - [组件](/zh-cn/class-component/component/component.md)
     - [属性](/zh-cn/class-component/property/property.md)
     - [方法](/zh-cn/class-component/method/method.md)
-    - [生命周期钩子](/zh-cn/class-component/lifecycle-hook/lifecycle-hook.md)
+    - [钩子](/zh-cn/class-component/hooks/hooks.md)
     - [组件属性](/zh-cn/class-component/component-property/component-property.md)
     - [存取器](/zh-cn/class-component/accessor/accessor.md)
     - [事件](/zh-cn/class-component/event/event.md)

docs/en/class-component/lifecycle-hook/code-for-other-names.ts

@@ -0,0 +1,15 @@
+
+import { Component, Vue, Hook } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    myHook(){},
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Hook
+    myHook() { }
+}

docs/zh-cn/_sidebar.md

@@ -6,7 +6,7 @@
 
 [](./code-usage.ts ':include :type=code typescript')
 
-## 钩子名称列表
+## 内部钩子名称列表
 
 ```javascript
 [
@@ -32,7 +32,7 @@
 
 ## 其他钩子名称
 
-如果你的钩子名称不再上面的列表中，你可以使用装饰器`Component`的`options`或`modifier`选项。
+如果你的钩子名称不再上面的列表中，你可以使用装饰器`Hook`。
 
 > 例如`vue-router`中的钩子。
 

docs/zh-cn/class-component/hooks/code-for-other-names.ts

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

docs/zh-cn/class-component/lifecycle-hook/code-usage.ts renamed to docs/zh-cn/class-component/hooks/code-usage.ts

@@ -2,7 +2,7 @@ import { defineComponent, ComponentCustomOptions } from 'vue';
 import { obtainSlot, getSuperSlot, getSlot } from './utils'
 import { build as optionComputed } from './option/computed'
 import { build as optionData } from './option/data'
-import { build as optionMethodsAndLifecycle } from './option/methodsAndLifecycle'
+import { build as optionMethodsAndHooks } from './option/methodsAndHooks'
 import { build as optionRef } from './option/ref'
 import { build as optionWatch, WatchConfig } from './option/watch'
 import { build as optionProps, PropsConfig } from './option/props'
@@ -22,7 +22,7 @@ function ComponentOption(cons: Cons, extend?: any) {
     optionInject(cons, optionBuilder)
     optionEmit(cons, optionBuilder)
     optionRef(cons, optionBuilder)//after Computed
-    optionMethodsAndLifecycle(cons, optionBuilder)//after Ref Computed
+    optionMethodsAndHooks(cons, optionBuilder)//after Ref Computed
     optionAccessor(cons, optionBuilder)
     const raw = {
         data() {
@@ -35,7 +35,7 @@ function ComponentOption(cons: Cons, extend?: any) {
         watch: optionBuilder.watch,
         props: optionBuilder.props,
         inject: optionBuilder.inject,
-        ...optionBuilder.lifecycle,
+        ...optionBuilder.hooks,
         extends: extend
     }
     return raw as any

docs/zh-cn/class-component/lifecycle-hook/lifecycle-hook.md renamed to docs/zh-cn/class-component/hooks/hooks.md

@@ -7,6 +7,7 @@ export { decorator as Inject } from './option/inject'
 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'
 import type {
     ComponentPublicInstance
 } from 'vue'

docs/zh-cn/class-component/lifecycle-hook/code-for-other-names.ts

@@ -1,8 +1,9 @@
-import { makeObject, obtainSlot } from '../utils'
+
 import { Cons } from '../component'
 import { OptionBuilder } from '../optionBuilder'
-import { toComponentReverse, excludeNames, getValidNames } from '../utils'
-export const LifecycleNames = [
+import { obtainSlot, toComponentReverse, excludeNames, getValidNames, optoinNullableMemberDecorator } from '../utils'
+
+export const HookNames = [
     "beforeCreate",
     "created",
     "beforeMount",
@@ -22,26 +23,38 @@ export const LifecycleNames = [
     "render"
 ] as const
 
+export type HookConfig = null
+export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string) {
+    const slot = obtainSlot(proto)
+    let map = slot.obtainMap<Map<string, HookConfig>>('hooks');
+    map.set(name, null)
+})
+
+
 export function build(cons: Cons, optionBuilder: OptionBuilder) {
     const slot = obtainSlot(cons.prototype)
     const protoArr = toComponentReverse(cons.prototype)
+    const map = slot.obtainMap('hooks')
 
-    optionBuilder.lifecycle ??= {}
+    optionBuilder.hooks ??= {}
     optionBuilder.methods ??= {}
-    const LifecycleFunctions: Record<string, Function> = {}
+    const HookFunctions: Record<string, Function> = {}
     const MethodFunctions: Record<string, Function> = {}
     protoArr.forEach(proto => {
         excludeNames(getValidNames(proto, (des, name) => {
+
             if (name === 'constructor') {
                 return false
             }
             if (typeof des.value === 'function') {
+
                 return true
             }
             return false
         }), slot).forEach(name => {
-            if (LifecycleNames.includes(name as any)) {
-                LifecycleFunctions[name] = proto[name]
+            if (HookNames.includes(name as any) || map.has(name)) {
+
+                HookFunctions[name] = proto[name]
             }
             else {
                 MethodFunctions[name] = proto[name]
@@ -54,14 +67,14 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
     Object.assign(optionBuilder.methods, MethodFunctions)
     const bccbs = optionBuilder.beforeCreateCallbacks
     if (bccbs && bccbs.length > 0) {
-        const oldBc = LifecycleFunctions['beforeCreate']
-        LifecycleFunctions['beforeCreate']=function(){
-            bccbs.forEach(bccb=>bccb.apply(this,arguments))
-            if(oldBc){
-                oldBc.apply(this,arguments)
+        const oldBc = HookFunctions['beforeCreate']
+        HookFunctions['beforeCreate'] = function () {
+            bccbs.forEach(bccb => bccb.apply(this, arguments))
+            if (oldBc) {
+                oldBc.apply(this, arguments)
             }
         }
     }
-    Object.assign(optionBuilder.lifecycle, LifecycleFunctions)
+    Object.assign(optionBuilder.hooks, HookFunctions)
 
 }

package.json

@@ -5,7 +5,7 @@ export interface OptionBuilder {
     name?: string
     data?: Record<string, any>
     methods?: Record<string, Function>
-    lifecycle?: Record<string, Function>
+    hooks?: Record<string, Function>
     computed?: Record<string, any>
     watch?: Record<string, WatchConfig | WatchConfig[]>
     props?: Record<string, PropsConfig>

src/component.ts

@@ -107,7 +107,7 @@ export function getSuperSlot(obj: any) {
 export function excludeNames(names: string[], slot: Slot) {
     return names.filter(name => {
         for (const mapName of slot.names.keys()) {
-            if (mapName === 'watch') {
+            if (['watch', 'hooks'].includes(mapName)) {
                 continue
             }
             const map = slot.names.get(mapName)!

src/index.ts

@@ -1,23 +1,31 @@
 
 import { expect } from 'chai';
 import 'mocha';
-import { Component, Ref, Base } from '../../dist'
+import { Component, Base, Hook } from '../../dist'
 
 @Component
 export class Comp extends Base {
-    mounted(){
+    mounted() {
         return 'mounted test value'
     }
+    @Hook
+    testHook(){
+        return 'testHook test value'
+    }
 
 }
 const CompContext = Comp as any
 
-describe('feature lifecycle',
+describe('feature hooks',
     () => {
         it('default', () => {
             expect('undefined').to.equal(typeof CompContext?.methods?.mounted)
             expect('function').to.equal(typeof CompContext?.mounted)
             expect('mounted test value').to.equal(CompContext?.mounted())
+
+            expect('undefined').to.equal(typeof CompContext?.methods?.testHook)
+            expect('function').to.equal(typeof CompContext?.testHook)
+            expect('testHook test value').to.equal(CompContext?.testHook())
         })
     }
 )

src/option/methodsAndLifecycle.ts renamed to src/option/methodsAndHooks.ts

@@ -15,6 +15,7 @@ describe('option data',
         it('default', () => {
             expect('function').to.equal(typeof CompContext?.data)
             expect('data value').to.equal(CompContext.data().data)
+            expect(1).to.equal(Object.keys(CompContext.data()).length)
         })
     }
 )

src/optionBuilder.ts

@@ -12,7 +12,7 @@ import './option/watch'
 import './option/inject'
 import './option/vmodel'
 import './option/accessor'
-import './feature/lifecycle'
+import './feature/hooks'
 import './feature/classExtends'
 import './feature/componentExtends'
 import './feature/extends'