a

Author: ruojianll

src/component.ts

@@ -14,13 +14,13 @@ import { build as optionAccessor } from './option/accessor'
 import type { SetupContext } from 'vue';
 import type { OptionBuilder } from './optionBuilder'
 import type { VueCons } from './index'
+import * as DecoratorCompatible from './deco3/utils'
 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>>
 function ComponentOption(cons: Cons, extend?: any) {
-
     const optionBuilder: OptionBuilder = {}
     optionSetup(cons, optionBuilder)
     optionVModel(cons, optionBuilder)
@@ -36,6 +36,7 @@ function ComponentOption(cons: Cons, extend?: any) {
     const setupFunction: OptionSetupFunction | undefined = optionBuilder.setup ? function (props, ctx) {
         return optionBuilder.setup!(props, ctx)
     } : undefined
+
     const raw = {
         setup: setupFunction,
         data() {
@@ -85,29 +86,34 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
         emits = Array.from(new Set([...emits, ...arg.emits]))
     }
     option.emits = emits
-    if (arg.setup) {
-        if (!option.setup) {
-            option.setup = arg.setup
-        } else {
-            const oldSetup: OptionSetupFunction = option.setup
-            const newSetup: ComponentSetupFunction = arg.setup
+    arg.setup ??= function () { return {} }
 
-            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])
-                    })
-                } else {
+    if (!option.setup) {
 
-                    return Object.assign({}, newRet, oldRet)
-                }
+        option.setup = arg.setup
+    } else {
+   
+        const oldSetup: OptionSetupFunction = option.setup
+        const newSetup: ComponentSetupFunction = arg.setup
 
+        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) => {
+                    const ret = Object.assign({}, arr[0], arr[1])
+                    return ret
+                })
+            } else {
+
+                const ret = Object.assign({}, newRet, oldRet)
+                return ret
             }
-            option.setup = setup
+
         }
+        option.setup = setup
     }
+
     if (arg.options) {
         Object.assign(option, arg.options)
     }
@@ -133,24 +139,33 @@ function build(cons: Cons, option: ComponentOption) {
     slot.cachedVueComponent = component
 
 }
-function _Component(arg: ComponentConsOption, cb: (cons: Cons, option: ComponentOption) => any) {
+function _Component(cb: (cons: Cons, option: ComponentOption) => any, arg: ComponentConsOption, ctx?: ClassDecoratorContext) {
     if (typeof arg === 'function') {
-        return cb(arg, {})
+        return DecoratorCompatible.compatibleClassDecorator(function (cons: Cons) {
+            return cb(cons, {})
+        })(arg, ctx)
     }
-    return function (cons: Cons) {
+    return DecoratorCompatible.compatibleClassDecorator(function (cons: Cons) {
         return cb(cons, arg)
-    }
+    })
 }
-export function ComponentBase(arg: ComponentConsOption): any {
-    return _Component(arg, function (cons: Cons, option: ComponentOption) {
+export function ComponentBase(arg: ComponentConsOption, ctx?: ClassDecoratorContext): any {
+    return _Component(function (cons: Cons, option: ComponentOption) {
         build(cons, option)
         return cons
-    })
+    }, arg, ctx)
 }
 
-export function Component(arg: ComponentConsOption): any {
-    return _Component(arg, function (cons: Cons, option: ComponentOption) {
-        build(cons, option)
-        return obtainSlot(cons.prototype).cachedVueComponent
-    })
+export const Component = ComponentBase
+
+export function toNative<T extends Cons>(cons: T): T {
+    const slot = obtainSlot(cons.prototype)
+    if (!slot.inComponent) {
+        throw 'to native 1'
+    }
+    const cached = slot.cachedVueComponent
+    if (!cached) {
+        throw 'to native 2'
+    }
+    return cached
 }

src/deco3/utils.ts

@@ -0,0 +1,41 @@
+import { obtainSlot } from '../utils'
+export const Compatible: {
+    fakePrototype?: any,
+
+} = {
+
+}
+export function compatibleClassDecorator(deco: Function) {
+    return function (arg: any, ctx?: DecoratorContext) {
+
+        if (ctx) {//stage 3
+
+            if (ctx.kind !== 'class') {
+                throw 'deco stage 3 class'
+            }
+            const proto = Compatible.fakePrototype ??= {}
+            const slot = obtainSlot(proto)
+            delete Compatible.fakePrototype
+
+            obtainSlot(arg.prototype, slot)
+            const ret = deco(arg)
+
+            return ret
+        }
+        else {
+
+            return deco(arg)
+        }
+    }
+}
+
+export function compatibleMemberDecorator(deco: Function) {
+    return function (arg: any, ctx: DecoratorContext | string) {
+        if (typeof ctx === 'object') {//stage 3
+            const proto = Compatible.fakePrototype ??= {}
+            return deco(proto, ctx.name)
+        } else {
+            return deco(arg, ctx)
+        }
+    }
+}

src/index.ts

@@ -31,13 +31,23 @@ export type VueCons<T = {}> = {
 
 export const Base = class {
     constructor(optionBuilder: OptionBuilder, vueInstance: any) {
+
         const props = optionBuilder.props
+
         if (props) {
             Object.keys(props).forEach(key => {
-                (this as any)[key] = vueInstance[key]
+                (this as any)[key] = vueInstance[key];
             })
         }
+        (global as any).kkk = this
+        console.log('base', (this as any).prop)
+        console.log('base', (global as any).kkk.prop)
+        setTimeout(() => {
+            console.log('base', (global as any).kkk.prop)
+        }, 0);
     }
 } as VueCons
 
 export const Vue = Base
+
+export { toNative } from './component'

src/option/data.ts

@@ -4,11 +4,15 @@ import { makeObject, obtainSlot, excludeNames, getValidNames } from '../utils'
 
 export function build(cons: Cons, optionBuilder: OptionBuilder, vueInstance: any, _propNames?: string[]) {
     optionBuilder.data ??= {}
+    console.log('build1')
     const sample = new cons(optionBuilder, vueInstance)
-    let names = getValidNames(sample, (des) => {
-        return !!des.enumerable
-    })
-    const slot = obtainSlot(cons.prototype)
-    names = excludeNames(names, slot)
-    Object.assign(optionBuilder.data, makeObject(names, sample))
+    // console.log('in build',sample)
+    // let names = getValidNames(sample, (des) => {
+    //     return !!des.enumerable
+    // })
+
+    // const slot = obtainSlot(cons.prototype)
+    // names = excludeNames(names, slot)
+
+    // Object.assign(optionBuilder.data, makeObject(names, sample))
 }

src/option/emit.ts

@@ -1,6 +1,7 @@
 import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
 import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
+import { compatibleMemberDecorator } from '../deco3/utils'
 export type EmitConfig = null | string
 
 export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string, key?: string) {

src/option/inject.ts

@@ -2,7 +2,7 @@ import type { InjectionKey } from 'vue'
 import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
 import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
-
+import { compatibleMemberDecorator } from '../deco3/utils'
 export interface InjectConfig {
     from?: string | symbol | Symbol | InjectionKey<any>
     default?: any

src/option/props.ts

@@ -1,7 +1,7 @@
 import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
 import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
-
+import { compatibleMemberDecorator } from '../deco3/utils'
 export interface PropsConfig {
     type?: any
     required?: boolean

src/option/ref.ts

@@ -1,7 +1,7 @@
 import type { Cons } from '../component'
 import { type OptionBuilder, applyAccessors } from '../optionBuilder'
 import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
-
+import { compatibleMemberDecorator } from '../deco3/utils'
 export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string) {
     const slot = obtainSlot(proto)
     const map = slot.obtainMap('ref')

src/option/setup.ts

@@ -1,3 +1,4 @@
+import { compatibleMemberDecorator} from '../deco3/utils'
 import type { OptionSetupFunction } from '../component'
 import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
@@ -8,14 +9,13 @@ export type SetupConfig = {
 }
 
 export function decorator(setupFunction: OptionSetupFunction) {
-    return function (proto: any, name: string) {
+    return compatibleMemberDecorator(function (proto: any, name: string) {
         const slot = obtainSlot(proto)
         const map = slot.obtainMap('setup')
         map.set(name, {
             setupFunction
         })
-    }
-
+    })
 }
 
 const isPromise = (v: any): v is Promise<any> => v instanceof Promise
@@ -28,10 +28,13 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
         return
     }
     const setup: OptionSetupFunction = function (props, ctx) {
+        
         const setupData: Record<string, any> = {};
         let promises: Promise<any>[] | null = null;
         for (const name of map.keys()) {
+
             const setupState = map.get(name)!.setupFunction(props, ctx)
+
             if (isPromise(setupState)) {
                 promises ??= []
                 promises.push(setupState.then((v) => {
@@ -49,5 +52,6 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
             return setupData
         }
     }
+
     optionBuilder.setup = setup
 }

src/option/vanilla.ts

@@ -1,5 +1,5 @@
 import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
-
+import { compatibleMemberDecorator } from '../deco3/utils'
 export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string) {
     const slot = obtainSlot(proto)
     const map = slot.obtainMap('vanilla')