Merge pull request #87 from tall1on/master

+ correctly expose `methods` option to recover compatibility to `vue-class-component`

Author: ruojianll

src/component.ts

@@ -1,4 +1,4 @@
-import { defineComponent, type ComponentCustomOptions } from 'vue';
+import { defineComponent, type ComponentCustomOptions, type MethodOptions } from 'vue';
 import { obtainSlot, getSuperSlot, getProviderFunction } from './utils'
 import { build as optionSetup } from './option/setup'
 import { build as optionComputed } from './option/computed'
@@ -70,6 +70,7 @@ type ComponentOption = {
     template?: string
     mixins?: any[]
     setup?: ComponentSetupFunction
+    methods?: MethodOptions
 }
 
 type ComponentConsOption = Cons | ComponentOption
@@ -78,7 +79,7 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
     const option = ComponentOption(cons, extend)
     const slot = obtainSlot(cons.prototype)
     Object.keys(arg).reduce<Record<string, any>>((option, name: string) => {
-        if (['options', 'modifier', 'emits', 'setup', 'provide'].includes(name)) {
+        if (['options', 'modifier', 'methods', 'emits', 'setup', 'provide'].includes(name)) {
             return option
         }
         option[name] = arg[name as keyof ComponentOption]
@@ -92,11 +93,16 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
     }
     option.emits = emits
 
+    //merge methods
+    if ('object' === typeof arg.methods && !Array.isArray(arg.methods) && arg.methods !== null) {
+        option.methods??={}
+        Object.assign(option.methods, arg.methods);
+    }
+
     //merge setup function
     if (!option.setup) {
         option.setup = arg.setup
     } else {
-
         const oldSetup: OptionSetupFunction = option.setup
         const newSetup: ComponentSetupFunction = arg.setup ?? function () { return {} }
 
@@ -105,16 +111,13 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
             const oldRet = oldSetup(props, ctx)
             if (oldRet instanceof Promise || newRet instanceof Promise) {
                 return Promise.all([newRet, oldRet]).then((arr) => {
-                    const ret = Object.assign({}, arr[0], arr[1])
-                    return ret
+                    return Object.assign({}, arr[0], arr[1])
                 })
             } else {
-
-                const ret = Object.assign({}, newRet, oldRet)
-                return ret
+                return Object.assign({}, newRet, oldRet)
             }
-
         }
+
         option.setup = setup
     }
 
@@ -130,7 +133,6 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
     if (map && map.size > 0) {
         map.forEach((v) => {
             v.forEach(ite=>ite.creator.apply({}, [option, ite.key]))
-            
         })
     }
 

src/option/methodsAndHooks.ts

@@ -2,7 +2,7 @@ import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
 import { obtainSlot, toComponentReverse, excludeNames, getValidNames, optionNullableMemberDecorator } from '../utils'
 
-export const HookNames = [
+export const HookNames: ReadonlyArray<string> = [
     "beforeCreate",
     "created",
     "beforeMount",
@@ -29,7 +29,6 @@ export const decorator = optionNullableMemberDecorator(function (proto: any, nam
     map.set(name, null)
 })
 
-
 export function build(cons: Cons, optionBuilder: OptionBuilder) {
     const slot = obtainSlot(cons.prototype)
     const protoArr = toComponentReverse(cons.prototype)
@@ -41,15 +40,7 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
     const MethodFunctions: Record<string, Function> = {}
     protoArr.forEach(proto => {
         let names = getValidNames(proto, (des, name) => {
-
-            if (name === 'constructor') {
-                return false
-            }
-            if (typeof des.value === 'function') {
-
-                return true
-            }
-            return false
+            return typeof des.value === 'function' && name !== 'constructor'
         })
         names = excludeNames(names, slot, (mapName) => {
             //include these names:
@@ -59,16 +50,12 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
             return !['watch', 'hooks', 'emits', 'provide'].includes(mapName)
         });
         names.forEach(name => {
-            if (HookNames.includes(name as any) || map.has(name)) {
-
+            if (HookNames.includes(name) || map.has(name)) {
                 HookFunctions[name] = proto[name]
-            }
-            else {
+            } else {
                 MethodFunctions[name] = proto[name]
             }
         })
-
-
     })
 
     Object.assign(optionBuilder.methods, MethodFunctions)
@@ -83,5 +70,4 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
         }
     }
     Object.assign(optionBuilder.hooks, HookFunctions)
-
 }

test/custom/custom.ts

@@ -40,4 +40,4 @@ describe('create decorator',
         })
     }
 )
-export default {}
+export default {}

test/option/emit.ts

@@ -75,4 +75,4 @@ describe('decorator Emit',
         })
     }
 )
-export default {}
+export default {}

test/option/methods.ts

@@ -3,12 +3,15 @@ import { expect } from 'chai';
 import 'mocha';
 import { Component, Base, toNative } from '../../dist'
 
-@Component
+@Component({
+    methods: {
+        optionTest: () => 'option value'
+    }
+})
 class Comp extends Base {
     method() {
         return 'method value'
     }
-
 }
 const CompContext = toNative(Comp) as any
 
@@ -17,7 +20,9 @@ describe('option methods',
         it('default', () => {
             expect('function').to.equal(typeof CompContext?.methods?.method)
             expect('method value').to.equal(CompContext.methods.method())
+            expect('function').to.equal(typeof CompContext?.methods?.optionTest)
+            expect('option value').to.equal(CompContext.methods.optionTest())
         })
     }
 )
-export default {}
+export default {}