Bind methods accessed by data

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": "git@github.com:facing-dev/vue-facing-decorator.git"
   }
-}
+}

package.json

@@ -38,7 +38,13 @@ 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)
+            })
+        }
+        console.log('pp',this)
     }
 
 } as VueCons

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)

src/option/data.ts

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

test/feature/hooks.ts

@@ -5,15 +5,27 @@ import { Component, Base, Prop, toNative } from '../../dist'
 import { mount } from '@vue/test-utils'
 
 @Component
-class Comp extends Base {
-
+class DataComp extends Base {
     data = 'data value'
+
     @Prop
     prop!: string
-    fieldInitProp = this.prop //not work
+    fieldInitProp = this.prop
+
+    methods = [this.method];
+
+    options = {
+        handler: this.method,
+    }
+    wrapped = () => this.method();
+
+    method() {
+        return this.prop
+    }
 }
 
-const CompContext = toNative(Comp) as any
+const CompContext = toNative(DataComp) as any
+
 describe('option data',
     () => {
         it('default', () => {
@@ -24,10 +36,25 @@ 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('prop test').to.equal(vm.fieldInitProp)
+            expect('data value').to.equal(vm.data)
+            // expect('data value').to.equal(CompContext.data().mb)
+            // 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)
+
         })
     }
 )
-export default {}
+export default {}

test/option/data.ts

@@ -1,24 +1,24 @@
 require('jsdom-global/keys.js').push('SVGElement')
 require('jsdom-global')()
-import './internal/utils'
-import './component'
-import './option/setup'
+// import './internal/utils'
+// import './component'
+// import './option/setup'
 import './option/data'
-import './option/methods'
-import './option/computed'
-import './option/emit'
-import './option/ref'
-import './option/props'
-import './option/watch'
-import './option/inject'
-import './option/vmodel'
-import './option/accessor'
-import './feature/hooks'
-import './feature/classExtends'
-import './feature/componentExtends'
-import './feature/extends'
-import './feature/mixinsFunction'
+// import './option/methods'
+// import './option/computed'
+// import './option/emit'
+// import './option/ref'
+// import './option/props'
+// import './option/watch'
+// import './option/inject'
+// 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'
+// import './tsx/attributeTypes'
+// import './custom/custom'