mixins function

Author: ruojianll

docs/en/inheritance/component/code-mixins-function.ts

@@ -0,0 +1,35 @@
+import { Component, ComponentBase, Vue, mixins } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    name:"MyComponent",
+    extends:{
+        mixins:[{
+            name:'ComponentA'
+        },{
+            name:'ComponentB'
+        }]
+    }
+}
+*/
+@ComponentBase({
+    name: "ComponentA"
+})
+class ComponentA extends Vue {
+
+}
+
+@ComponentBase({
+    name: "ComponentB"
+})
+class ComponentB extends Vue {
+
+}
+
+@Component({
+    name: "MyComponent"
+})
+export default class MyComponent extends mixins(ComponentA,ComponentB) {
+
+}

docs/en/inheritance/component/component.md

@@ -10,6 +10,13 @@ Consider code:
 
 There are two components: `MyComponent` and `SuperComponent`. The inheritance is implemented by vue `extends`.
 
+## Extends multiple components
+
+Use `mixins` function to extends multiple components decorated by `ComponentBase`.
+
+[](./code-mixins-function.ts ':include :type=code typescript')
+
+
 ## For vue native components
 
 Use `mixins` to merge vue native components.

docs/zh-cn/inheritance/component/code-mixins-function.ts

@@ -0,0 +1,36 @@
+
+import { Component, ComponentBase, Vue, mixins } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    name:"MyComponent",
+    extends:{
+        mixins:[{
+            name:'ComponentA'
+        },{
+            name:'ComponentB'
+        }]
+    }
+}
+*/
+@ComponentBase({
+    name: "ComponentA"
+})
+class ComponentA extends Vue {
+
+}
+
+@ComponentBase({
+    name: "ComponentB"
+})
+class ComponentB extends Vue {
+
+}
+
+@Component({
+    name: "MyComponent"
+})
+export default class MyComponent extends mixins(ComponentA,ComponentB) {
+
+}

docs/zh-cn/inheritance/component/component.md

@@ -10,6 +10,12 @@
 
 这里有两个组件：`MyComponent`和`SuperComponent`。继承是通过vue `extends`实现的。
 
+## 继承多组件
+
+使用 `mixins` 函数来继承多个通过 `ComponentBase` 装饰的组件。
+
+[](./code-mixins-function.ts ':include :type=code typescript')
+
 ## 关于vue原生组件
 
 使用`mixins`来合并vue原生组件。

package-lock.json

@@ -23,7 +23,7 @@
     "build:esm": "./node_modules/.bin/tsc -outDir dist/esm -module ES6",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "watch":"./node_modules/.bin/tsc -outDir dist/esm -module ES6 --watch"
+    "watch": "./node_modules/.bin/tsc -outDir dist/esm -module ES6 --watch"
   },
   "author": "",
   "license": "MIT",
@@ -44,13 +44,13 @@
     "jsdom-global": "^3.0.2",
     "mocha": "^10.0.0",
     "ts-node": "^10.8.1",
-    "typescript": "latest",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "typescript": "latest"
   },
   "homepage": "https://github.com/facing-dev/vue-facing-decorator",
   "repository": {
     "type": "git",
     "url": "git@github.com:facing-dev/vue-facing-decorator.git"
-  },
-  "dependencies": {}
+  }
+
 }

package.json

@@ -18,7 +18,7 @@ export type Cons = VueCons
 
 type SetupFunction<T> = (this: void, props: Readonly<any>, ctx: SetupContext<any>) => T | Promise<T>
 export type OptionSetupFunction = SetupFunction<any>
-export type ComponentSetupFunction = SetupFunction<Record<string,any>>
+export type ComponentSetupFunction = SetupFunction<Record<string, any>>
 function ComponentOption(cons: Cons, extend?: any) {
 
     const optionBuilder: OptionBuilder = {}
@@ -74,7 +74,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'].includes(name)) {
+        if (['options', 'modifier', 'emits', 'setup'].includes(name)) {
             return option
         }
         option[name] = arg[name as keyof ComponentOption]
@@ -91,17 +91,17 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
         } else {
             const oldSetup: OptionSetupFunction = option.setup
             const newSetup: ComponentSetupFunction = arg.setup
-            
-            const setup:  ComponentSetupFunction = function (props, ctx) {
+
+            const setup: ComponentSetupFunction = function (props, ctx) {
                 const newRet = newSetup(props, ctx)
                 const oldRet = oldSetup(props, ctx)
-                if(oldRet instanceof Promise || newRet instanceof Promise){
-                    return Promise.all([newRet,oldRet]).then((arr)=>{
-                        return Object.assign({},arr[0],arr[1])
+                if (oldRet instanceof Promise || newRet instanceof Promise) {
+                    return Promise.all([newRet, oldRet]).then((arr) => {
+                        return Object.assign({}, arr[0], arr[1])
                     })
-                }else{
+                } else {
 
-                    return Object.assign({},newRet,oldRet)
+                    return Object.assign({}, newRet, oldRet)
                 }
 
             }
@@ -151,12 +151,6 @@ export function ComponentBase(arg: ComponentConsOption): any {
 export function Component(arg: ComponentConsOption): any {
     return _Component(arg, function (cons: Cons, option: ComponentOption) {
         build(cons, option)
-        // const slot = getSlot(cons.prototype)!
-        // Object.defineProperty(cons, '__vccOpts', {
-        //     value: slot.cachedVueComponent
-        // })
-        // console.log('kkkk', '__vccOpts' in cons, cons)
-        // return cons
         return obtainSlot(cons.prototype).cachedVueComponent
     })
 }

src/component.ts

@@ -8,6 +8,7 @@ export { decorator as Emit } from './option/emit'
 export { decorator as VModel, decorator as Model } from './option/vmodel'
 export { decorator as Vanilla } from './option/vanilla'
 export { decorator as Hook } from './option/methodsAndHooks'
+export { mixins } from './mixins'
 import type { ComponentPublicInstance } from 'vue'
 import type { OptionBuilder } from './optionBuilder'
 
@@ -24,8 +25,8 @@ export function TSX<Properties extends {} = {}, Events extends {} = {}>() {
     }
 }
 
-export type VueCons = {
-    new(optionBuilder: OptionBuilder, vueInstance: any): ComponentPublicInstance & BaseTypeIdentify
+export type VueCons<T = {}> = {
+    new(optionBuilder: OptionBuilder, vueInstance: any): ComponentPublicInstance & BaseTypeIdentify & T
 }
 
 export const Base = class {

src/index.ts

@@ -0,0 +1,22 @@
+import { ComponentBase } from './component'
+import { obtainSlot } from './utils'
+import type { VueCons } from './index'
+import { Vue } from './index'
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type MixedClass<Mixins extends VueCons[]> = UnionToIntersection<{ [index in keyof Mixins]: InstanceType<Mixins[index]> }[number]>
+export function mixins<T extends VueCons[]>(...conses: T) {
+    class MixinsClass extends Vue {
+
+    }
+    ComponentBase({
+        mixins: conses.map((cons => obtainSlot(cons.prototype).cachedVueComponent))
+    })(MixinsClass)
+    return MixinsClass as any as VueCons<MixedClass<T>>
+}
+
+
+
+
+
+
+

src/mixins.ts

@@ -0,0 +1,42 @@
+
+import { expect } from 'chai';
+import 'mocha';
+import { Component, ComponentBase, Vue, mixins } from '../../dist'
+
+@ComponentBase
+class A extends Vue {
+    methodA(){
+        return 'methodAValue'
+    }
+}
+
+@ComponentBase
+class B extends Vue {
+
+    methodB(){
+        return 'methodBValue'
+    }
+}
+
+@Component
+class Comp extends mixins(A,B){
+
+}
+
+const CompContext = Comp as any
+
+
+
+describe('mixins function',
+    () => {
+        it('default', () => {
+            expect('object').to.equal(typeof CompContext.extends)
+            expect(true).to.equal(Array.isArray(CompContext.extends.mixins))
+            expect('function').to.equal(typeof CompContext.extends.mixins[0].methods.methodA)
+            expect('methodAValue').to.equal(CompContext.extends.mixins[0].methods.methodA())
+            expect('function').to.equal(typeof CompContext.extends.mixins[0].methods.methodA)
+            expect('methodBValue').to.equal(CompContext.extends.mixins[1].methods.methodB())
+        })
+    }
+)
+export default {}