🐛 Bind methods accessed by data

Consider a component like this:

```typescript
@component
class MyComponent {
  foo = 'foo'
  options = {
    handler = this.method,
  }

  method() {
    return this.foo
  }
}
```

When we call `options.handler()`, we would expect to get back `foo`,
but this currently doesn't work, because the methods aren't correctly
bound in the data builder function.

This change actively binds the functions to the Vue component instance,
so that the above example works as expected.

Author: alecgibson

src/index.ts

@@ -38,6 +38,12 @@ export const Base = class {
                 (this as any)[key] = vueInstance[key]
             })
         }
+        const methods = optionBuilder.methods
+        if (methods) {
+            Object.keys(methods).forEach(key => {
+                (this as any)[key] = methods[key].bind(vueInstance)
+            })
+        }
     }
 } as VueCons
 

src/option/data.ts

@@ -4,9 +4,9 @@ import { makeObject, obtainSlot, excludeNames, getValidNames } from '../utils'
 
 export function build(cons: Cons, optionBuilder: OptionBuilder, vueInstance: any, _propNames?: string[]) {
     optionBuilder.data ??= {}
-    const sample = new cons(optionBuilder, vueInstance)
-    let names = getValidNames(sample, (des) => {
-        return !!des.enumerable
+    const sample = new cons(optionBuilder, vueInstance) as any
+    let names = getValidNames(sample, (des, name) => {
+        return !!des.enumerable && !optionBuilder.methods?.[name]
     })
     const slot = obtainSlot(cons.prototype)
     names = excludeNames(names, slot)

test/option/data.ts

@@ -5,14 +5,24 @@ import { Component, Base, Prop } from '../../dist'
 import { mount } from '@vue/test-utils'
 
 @Component
-export class Comp extends Base {
+export class DataComp extends Base {
     data = 'data value'
     @Prop
     prop!: string
     fieldInitProp = this.prop
+
+    methods = [this.method];
+    options = {
+        handler: this.method,
+    }
+    wrapped = () => this.method();
+
+    method() {
+        return this.data
+    }
 }
 
-const CompContext = Comp as any
+const CompContext = DataComp as any
 
 describe('option data',
     () => {
@@ -25,9 +35,16 @@ describe('option data',
 
             expect('function').to.equal(typeof CompContext?.data)
             expect('data value').to.equal(CompContext.data().data)
-            expect(2).to.equal(Object.keys(CompContext.data()).length)
+            expect(5).to.equal(Object.keys(CompContext.data()).length)
             expect('prop test').to.equal(vm.fieldInitProp)
         })
+
+        it('binds methods to the component context', () => {
+            const {vm} = mount(CompContext)
+            expect('data value').to.equal(vm.methods[0]())
+            expect('data value').to.equal(vm.options.handler())
+            expect('data value').to.equal(vm.wrapped())
+        })
     }
 )
-export default {}
+export default {}