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

Author: tall1on

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
@@ -92,11 +93,17 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
     }
     option.emits = emits
 
+    //apply methods
+    let methods = Object.fromEntries(slot.obtainMap('methods'))
+    if ('object' === typeof arg.methods && !Array.isArray(arg.methods) && arg.methods !== null) {
+        methods = Object.assign(methods, arg.methods);
+    }
+    option.methods = 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 +112,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 +134,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/emit.ts

@@ -18,10 +18,12 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
         return
     }
     const emits = slot.obtainMap('emits')
+    const methods = slot.obtainMap('methods')
     names.forEach((value, key) => {
         const eventName = value === null ? key : value
         emits.set(eventName, true)
-        optionBuilder.methods![key] = async function (this: any) {
+
+        const emitFunction = async function (this: any) {
 
             const ret = proto[key].apply(this, arguments)
             if (ret instanceof Promise) {
@@ -32,6 +34,7 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
                 this.$emit(eventName, ret)
             }
         }
+        optionBuilder.methods![key] = emitFunction
+        methods.set(key, emitFunction)
     })
-
 }

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,46 +29,35 @@ 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)
-    const map = slot.obtainMap('hooks')
+    const hookMap = slot.obtainMap('hooks')
+    const methodsMap = slot.obtainMap('methods')
 
     optionBuilder.hooks ??= {}
     optionBuilder.methods ??= {}
     const HookFunctions: Record<string, Function> = {}
     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:
             //watch, user may call watch method directly
             //hooks, user may call hook method directly
             //emits, user may have a method name which is same as one of event names
-            return !['watch', 'hooks', 'emits', 'provide'].includes(mapName)
+            return !['methods', 'watch', 'hooks', 'emits', 'provide'].includes(mapName)
         });
         names.forEach(name => {
-            if (HookNames.includes(name as any) || map.has(name)) {
-
+            if (HookNames.includes(name) || hookMap.has(name)) {
                 HookFunctions[name] = proto[name]
-            }
-            else {
+            } else {
                 MethodFunctions[name] = proto[name]
+                methodsMap.set(name, proto[name])
             }
         })
-
-
     })
 
     Object.assign(optionBuilder.methods, MethodFunctions)
@@ -83,5 +72,4 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
         }
     }
     Object.assign(optionBuilder.hooks, HookFunctions)
-
 }

src/utils.ts

@@ -28,6 +28,7 @@ export type SlotMapTypes = {
     ref: Map<string, RefConfig>
     setup: Map<string, SetupConfig>
     customDecorator: Map<string, CustomDecoratorRecord[]>
+    methods: Map<string, Function>
 }
 
 class Slot {

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 {}