Skip to content

Commit 2957b20

Browse files
committed
1 parent 3ac427c commit 2957b20

File tree

19 files changed

+84
-73
lines changed

19 files changed

+84
-73
lines changed

docs/en/_sidebar.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
- [Component](/en/class-component/component/component.md)
55
- [Property](/en/class-component/property/property.md)
66
- [Method](/en/class-component/method/method.md)
7-
- [Lifecycle hooks](/en/class-component/lifecycle-hook/lifecycle-hook.md)
7+
- [Hooks](/en/class-component/hooks/hooks.md)
88
- [Component property](/en/class-component/component-property/component-property.md)
99
- [Accessor](/en/class-component/accessor/accessor.md)
1010
- [Event](/en/class-component/event/event.md)
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
import { Component, Vue, Hook } from 'vue-facing-decorator'
3+
4+
/*
5+
Vue options API
6+
{
7+
myHook(){},
8+
}
9+
*/
10+
11+
@Component
12+
export default class MyComponent extends Vue {
13+
@Hook
14+
myHook() { }
15+
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ Class component supports almost all lifecycle hooks in vanilla vue. Write them a
66
77
[](./code-usage.ts ':include :type=code typescript')
88

9-
## Lsit of lifecycle hook names
9+
10+
11+
## Internal hook names list
1012

1113
```javascript
1214
[
@@ -32,7 +34,7 @@ Class component supports almost all lifecycle hooks in vanilla vue. Write them a
3234

3335
## For other names
3436

35-
If your hook names aren't in the above list. You could use `options` or `modifier` in `Component` decorator.
37+
If your hook names aren't in the above list. You could use decorator `Hook`.
3638

3739
> e.g. Hooks from `vue-router`.
3840

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

Lines changed: 0 additions & 22 deletions
This file was deleted.

docs/zh-cn/_sidebar.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
- [组件](/zh-cn/class-component/component/component.md)
55
- [属性](/zh-cn/class-component/property/property.md)
66
- [方法](/zh-cn/class-component/method/method.md)
7-
- [生命周期钩子](/zh-cn/class-component/lifecycle-hook/lifecycle-hook.md)
7+
- [钩子](/zh-cn/class-component/hooks/hooks.md)
88
- [组件属性](/zh-cn/class-component/component-property/component-property.md)
99
- [存取器](/zh-cn/class-component/accessor/accessor.md)
1010
- [事件](/zh-cn/class-component/event/event.md)
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
import { Component, Vue, Hook } from 'vue-facing-decorator'
3+
4+
/*
5+
Vue options API
6+
{
7+
myHook(){},
8+
}
9+
*/
10+
11+
@Component
12+
export default class MyComponent extends Vue {
13+
@Hook
14+
myHook() { }
15+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
77
[](./code-usage.ts ':include :type=code typescript')
88

9-
## 钩子名称列表
9+
## 内部钩子名称列表
1010

1111
```javascript
1212
[
@@ -32,7 +32,7 @@
3232

3333
## 其他钩子名称
3434

35-
如果你的钩子名称不再上面的列表中,你可以使用装饰器`Component``options``modifier`选项
35+
如果你的钩子名称不再上面的列表中,你可以使用装饰器`Hook`
3636

3737
> 例如`vue-router`中的钩子。
3838

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

Lines changed: 0 additions & 22 deletions
This file was deleted.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-facing-decorator",
3-
"version": "2.1.11",
3+
"version": "2.1.12",
44
"description": "Vue typescript class and decorator based component.",
55
"main": "dist/index.js",
66
"keywords": [

src/component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { defineComponent, ComponentCustomOptions } from 'vue';
22
import { obtainSlot, getSuperSlot, getSlot } from './utils'
33
import { build as optionComputed } from './option/computed'
44
import { build as optionData } from './option/data'
5-
import { build as optionMethodsAndLifecycle } from './option/methodsAndLifecycle'
5+
import { build as optionMethodsAndHooks } from './option/methodsAndHooks'
66
import { build as optionRef } from './option/ref'
77
import { build as optionWatch, WatchConfig } from './option/watch'
88
import { build as optionProps, PropsConfig } from './option/props'
@@ -22,7 +22,7 @@ function ComponentOption(cons: Cons, extend?: any) {
2222
optionInject(cons, optionBuilder)
2323
optionEmit(cons, optionBuilder)
2424
optionRef(cons, optionBuilder)//after Computed
25-
optionMethodsAndLifecycle(cons, optionBuilder)//after Ref Computed
25+
optionMethodsAndHooks(cons, optionBuilder)//after Ref Computed
2626
optionAccessor(cons, optionBuilder)
2727
const raw = {
2828
data() {
@@ -35,7 +35,7 @@ function ComponentOption(cons: Cons, extend?: any) {
3535
watch: optionBuilder.watch,
3636
props: optionBuilder.props,
3737
inject: optionBuilder.inject,
38-
...optionBuilder.lifecycle,
38+
...optionBuilder.hooks,
3939
extends: extend
4040
}
4141
return raw as any

src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export { decorator as Inject } from './option/inject'
77
export { decorator as Emit } from './option/emit'
88
export { decorator as VModel, decorator as Model } from './option/vmodel'
99
export { decorator as Vanilla } from './option/vanilla'
10+
export { decorator as Hook } from './option/methodsAndHooks'
1011
import type {
1112
ComponentPublicInstance
1213
} from 'vue'

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

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { makeObject, obtainSlot } from '../utils'
1+
22
import { Cons } from '../component'
33
import { OptionBuilder } from '../optionBuilder'
4-
import { toComponentReverse, excludeNames, getValidNames } from '../utils'
5-
export const LifecycleNames = [
4+
import { obtainSlot, toComponentReverse, excludeNames, getValidNames, optoinNullableMemberDecorator } from '../utils'
5+
6+
export const HookNames = [
67
"beforeCreate",
78
"created",
89
"beforeMount",
@@ -22,26 +23,38 @@ export const LifecycleNames = [
2223
"render"
2324
] as const
2425

26+
export type HookConfig = null
27+
export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string) {
28+
const slot = obtainSlot(proto)
29+
let map = slot.obtainMap<Map<string, HookConfig>>('hooks');
30+
map.set(name, null)
31+
})
32+
33+
2534
export function build(cons: Cons, optionBuilder: OptionBuilder) {
2635
const slot = obtainSlot(cons.prototype)
2736
const protoArr = toComponentReverse(cons.prototype)
37+
const map = slot.obtainMap('hooks')
2838

29-
optionBuilder.lifecycle ??= {}
39+
optionBuilder.hooks ??= {}
3040
optionBuilder.methods ??= {}
31-
const LifecycleFunctions: Record<string, Function> = {}
41+
const HookFunctions: Record<string, Function> = {}
3242
const MethodFunctions: Record<string, Function> = {}
3343
protoArr.forEach(proto => {
3444
excludeNames(getValidNames(proto, (des, name) => {
45+
3546
if (name === 'constructor') {
3647
return false
3748
}
3849
if (typeof des.value === 'function') {
50+
3951
return true
4052
}
4153
return false
4254
}), slot).forEach(name => {
43-
if (LifecycleNames.includes(name as any)) {
44-
LifecycleFunctions[name] = proto[name]
55+
if (HookNames.includes(name as any) || map.has(name)) {
56+
57+
HookFunctions[name] = proto[name]
4558
}
4659
else {
4760
MethodFunctions[name] = proto[name]
@@ -54,14 +67,14 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
5467
Object.assign(optionBuilder.methods, MethodFunctions)
5568
const bccbs = optionBuilder.beforeCreateCallbacks
5669
if (bccbs && bccbs.length > 0) {
57-
const oldBc = LifecycleFunctions['beforeCreate']
58-
LifecycleFunctions['beforeCreate']=function(){
59-
bccbs.forEach(bccb=>bccb.apply(this,arguments))
60-
if(oldBc){
61-
oldBc.apply(this,arguments)
70+
const oldBc = HookFunctions['beforeCreate']
71+
HookFunctions['beforeCreate'] = function () {
72+
bccbs.forEach(bccb => bccb.apply(this, arguments))
73+
if (oldBc) {
74+
oldBc.apply(this, arguments)
6275
}
6376
}
6477
}
65-
Object.assign(optionBuilder.lifecycle, LifecycleFunctions)
78+
Object.assign(optionBuilder.hooks, HookFunctions)
6679

6780
}

src/optionBuilder.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export interface OptionBuilder {
55
name?: string
66
data?: Record<string, any>
77
methods?: Record<string, Function>
8-
lifecycle?: Record<string, Function>
8+
hooks?: Record<string, Function>
99
computed?: Record<string, any>
1010
watch?: Record<string, WatchConfig | WatchConfig[]>
1111
props?: Record<string, PropsConfig>

src/utils.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export function getSuperSlot(obj: any) {
107107
export function excludeNames(names: string[], slot: Slot) {
108108
return names.filter(name => {
109109
for (const mapName of slot.names.keys()) {
110-
if (mapName === 'watch') {
110+
if (['watch', 'hooks'].includes(mapName)) {
111111
continue
112112
}
113113
const map = slot.names.get(mapName)!

test/feature/lifecycle.ts renamed to test/feature/hooks.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,31 @@
11

22
import { expect } from 'chai';
33
import 'mocha';
4-
import { Component, Ref, Base } from '../../dist'
4+
import { Component, Base, Hook } from '../../dist'
55

66
@Component
77
export class Comp extends Base {
8-
mounted(){
8+
mounted() {
99
return 'mounted test value'
1010
}
11+
@Hook
12+
testHook(){
13+
return 'testHook test value'
14+
}
1115

1216
}
1317
const CompContext = Comp as any
1418

15-
describe('feature lifecycle',
19+
describe('feature hooks',
1620
() => {
1721
it('default', () => {
1822
expect('undefined').to.equal(typeof CompContext?.methods?.mounted)
1923
expect('function').to.equal(typeof CompContext?.mounted)
2024
expect('mounted test value').to.equal(CompContext?.mounted())
25+
26+
expect('undefined').to.equal(typeof CompContext?.methods?.testHook)
27+
expect('function').to.equal(typeof CompContext?.testHook)
28+
expect('testHook test value').to.equal(CompContext?.testHook())
2129
})
2230
}
2331
)

test/option/data.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ describe('option data',
1515
it('default', () => {
1616
expect('function').to.equal(typeof CompContext?.data)
1717
expect('data value').to.equal(CompContext.data().data)
18+
expect(1).to.equal(Object.keys(CompContext.data()).length)
1819
})
1920
}
2021
)

test/test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import './option/watch'
1212
import './option/inject'
1313
import './option/vmodel'
1414
import './option/accessor'
15-
import './feature/lifecycle'
15+
import './feature/hooks'
1616
import './feature/classExtends'
1717
import './feature/componentExtends'
1818
import './feature/extends'

0 commit comments

Comments
 (0)