Merge branch 'reedsy-method-from-data-this'

Author: ruojianll

package-lock.json

@@ -17,7 +17,7 @@
   ],
   "scripts": {
     "test-build": "npm run build && npm run test",
-    "test":"npm run test-stage2 && npm run test-stage3",
+    "test": "npm run test-stage2 && npm run test-stage3",
     "test-stage2": "env TS_NODE_COMPILER_OPTIONS='{\"experimentalDecorators\": true }' mocha -r ts-node/register test/test.ts",
     "test-stage3": "env TS_NODE_COMPILER_OPTIONS='{\"experimentalDecorators\": false }' mocha -r ts-node/register test/test.ts",
     "build": "npm run build:cjs && npm run build:esm",
@@ -45,12 +45,12 @@
     "jsdom-global": "^3.0.2",
     "mocha": "^10.0.0",
     "ts-node": "^10.8.1",
-    "vue": "^3.2.37",
-    "typescript": "latest"
+    "typescript": "^5.1.6",
+    "vue": "^3.2.37"
   },
   "homepage": "https://github.com/facing-dev/vue-facing-decorator",
   "repository": {
     "type": "git",
     "url": "[email protected]:facing-dev/vue-facing-decorator.git"
   }
-}
+}

package.json

@@ -39,11 +39,16 @@ 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
 
 export const Vue = Base
 
-export { toNative } from './component'
+export { toNative } from './component'

src/index.ts

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

src/option/data.ts

@@ -15,7 +15,6 @@ class Comp extends Base {
 
 }
 const CompContext = toNative(Comp) as any
-
 describe('feature hooks',
     () => {
         it('default', () => {

test/feature/hooks.ts

@@ -4,16 +4,30 @@ import 'mocha';
 import { Component, Base, Prop, toNative } from '../../dist'
 import { mount } from '@vue/test-utils'
 
-@Component({template: '<div/>'})
-class Comp extends Base {
 
+@Component({ template: '<div/>' })
+class Comp extends Base {
     data = 'data value'
+
     @Prop
     prop!: string
+
     fieldInitProp = this.prop //not work
+
+    methods = [this.method];
+
+    options = {
+        handler: this.method,
+    }
+    wrapped = () => this.method();
+
+    method() {
+        return this.prop
+    }
 }
 
 const CompContext = toNative(Comp) as any
+
 describe('option data',
     () => {
         it('default', () => {
@@ -24,9 +38,22 @@ describe('option data',
             }).vm
 
             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('data value').to.equal(vm.data)
+            expect(5).to.equal(Object.keys(CompContext.data()).length)
+        })
+
+        it('binds methods to the component context', () => {
+            const { vm } = mount(CompContext, {
+                props: {
+                    prop: 'prop test'
+                }
+            })
+            expect('prop test').to.equal(vm.methods[0]())
+            expect('prop test').to.equal(vm.options.handler())
+            expect('prop test').to.equal(vm.wrapped())
             // expect('prop test').to.equal(vm.fieldInitProp)
+
+
         })
     }
 )

test/option/data.ts

@@ -11,15 +11,13 @@ import './option/ref'
 import './option/props'
 import './option/watch'
 import './option/inject'
-import './option/provide'
 import './option/vmodel'
 import './option/accessor'
 import './feature/hooks'
 import './feature/classExtends'
 import './feature/componentExtends'
 import './feature/extends'
 import './feature/mixinsFunction'
-
 import './tsx/attributeTypes'
 import './custom/custom'