Add registerHooks method to Component decorator (vuejs#46)

ktsn · web-flow · commit 543a2dad56df · 2016-12-17T19:24:36.000+09:00
* add registerHooks

* update README for custom hooks

* fix syntax error in readme

* fix grammatical error

* use namespace to bypass type assertion
diff --git a/README.md b/README.md
@@ -103,6 +103,59 @@ class MyComp extends Vue {
 }
 ```
 
+### Adding Custom Hooks
+
+If you use some Vue plugins like Vue Router, you may want class components to resolve hooks that they provides. For that case, `Component.registerHooks` allows you to register such hooks:
+
+```js
+// class-component-hooks.js
+import Component from 'vue-class-component'
+
+// Register the router hooks with thier names
+Component.registerHooks([
+  'beforeRouteEnter',
+  'beforeRouteLeave'
+])
+```
+
+```js
+// MyComp.js
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component
+class MyComp extends Vue {
+  // The class component now treats beforeRouteEnter
+  // and beforeRouteLeave as Vue Router hooks
+  beforeRouteEnter () {
+    console.log('beforeRouteEnter')
+  }
+
+  beforeRouteLeave () {
+    console.log('beforeRouteLeave')
+  }
+}
+```
+
+Note that you have to register the hooks before component definition.
+
+```js
+// main.js
+
+// Make sure to register before importing any components
+import './class-component-hooks'
+
+import Vue from 'vue'
+import MyComp from './MyComp'
+
+new Vue({
+  el: '#app',
+  components: {
+    MyComp
+  }
+})
+```
+
 ### Build the Example
 
 ``` bash
diff --git a/src/component.ts b/src/component.ts
@@ -2,7 +2,7 @@ import * as Vue from 'vue'
 import { VueClass } from './declarations'
 import { collectDataFromConstructor } from './data'
 
-const internalHooks = [
+export const $internalHooks = [
   'data',
   'beforeCreate',
   'created',
@@ -34,7 +34,7 @@ export function componentFactory (
       return
     }
     // hooks
-    if (internalHooks.indexOf(key) > -1) {
+    if ($internalHooks.indexOf(key) > -1) {
       options[key] = proto[key]
       return
     }
diff --git a/src/index.ts b/src/index.ts
@@ -1,17 +1,26 @@
 import * as Vue from 'vue'
 import { VueClass } from './declarations'
-
-import { componentFactory } from './component'
+import { componentFactory, $internalHooks } from './component'
 
 export { createDecorator } from './util'
 
-export default function Component <U extends Vue>(options: Vue.ComponentOptions<U>): <V extends VueClass>(target: V) => V
-export default function Component <V extends VueClass>(target: V): V
-export default function Component <V extends VueClass>(options: Vue.ComponentOptions<any> | V): any {
+function Component <U extends Vue>(options: Vue.ComponentOptions<U>): <V extends VueClass>(target: V) => V
+function Component <V extends VueClass>(target: V): V
+function Component <V extends VueClass, U extends Vue>(
+ options: Vue.ComponentOptions<U> | V
+): any {
   if (typeof options === 'function') {
     return componentFactory(options)
   }
   return function (Component: V) {
     return componentFactory(Component, options)
   }
 }
+
+namespace Component {
+  export function registerHooks (keys: string[]): void {
+    $internalHooks.push(...keys)
+  }
+}
+
+export default Component
diff --git a/test/test.ts b/test/test.ts
@@ -25,6 +25,21 @@ describe('vue-class-component', () => {
     expect(destroyed).to.be.true
   })
 
+  it('hooks: adding custom hooks', () => {
+    Component.registerHooks(['beforeRouteEnter'])
+
+    @Component
+    class MyComp extends Vue {
+      static options: any
+
+      beforeRouteEnter () {
+        return 'beforeRouteEnter'
+      }
+    }
+
+    expect(MyComp.options.beforeRouteEnter()).to.equal('beforeRouteEnter')
+  })
+
   it('data: should collect from class properties', () => {
     @Component({
       props: ['foo']
