merge stage2/3 and pass all tests

Author: ruojianll

docs/delare.d.ts

@@ -23,4 +23,6 @@
 - Custom Decorator
     - [Custom Decorator](/en/custom/custom.md)
 - Compatibility
-    - [reflect-metadata](/en/compatibility/reflect-metadata/reflect-metadata.md)
+    - [reflect-metadata](/en/compatibility/reflect-metadata/reflect-metadata.md)
+- Next version
+    - [Next version](/en/next-version/next-version.md)

docs/en/_sidebar.md

@@ -0,0 +1,17 @@
+
+import { Component, Vue, toNative, Prop } from 'vue-facing-decorator'
+
+@Component({
+    name: "MyComponent"
+})
+class MyComponent extends Vue {
+    @Prop
+    prop!: string
+
+    field = this.prop // this is deprecated, it will be undefined
+}
+
+
+export default toNative(MyComponent)
+
+export { MyComponent }

docs/en/next-version/breaking-changes-classProperty.ts

@@ -0,0 +1,50 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+@Component({
+    name: "MyComponent"
+})
+class MyComponent extends Vue {
+
+}
+
+/*
+Cast to vue options API by toNative
+{
+    name:"MyComponent"
+}
+*/
+
+export default toNative(MyComponent)
+
+export { MyComponent }
+
+/*
+import MyComponent from 'MyComponent.vue'
+
+@Component({
+    components:[MyComponent] // use it as a component of another component
+})
+
+
+//or
+
+
+import { createApp } from 'vue'
+import MyComponent from 'MyComponent.vue'
+
+createApp(MyComponent).mount('#root') // or other places which vue want an options API component
+*/
+
+/*
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+import { MyComponent } from 'MyComponent.vue'
+
+// Extends component constructor directly
+
+@Component
+class AnotherComponent extends MyComponent {
+
+}
+
+*/

docs/en/next-version/breaking-changes-toNative.ts

@@ -0,0 +1,31 @@
+## Next version
+
+We published a preview next version that is compatible with JavaScript decorator stage 3. To migrate to preview next vewsion, you need to change your project with some break changes.
+
+In 3.x, decorator `Component` is same to `ComponentBase`, and you should cast class component to vue options API manually, see Breaking changes secion.
+
+## Install
+
+* `npm install vue-facing-decorator@beta`
+
+* Update typescript to 5.x
+
+* Set `compilerOptions.experimentalDecorators` to `false`, this will enable stage 3 decorator.
+
+## Breaking changes
+
+### Cast class component to vue options API
+
+You must use `toNative` to cast a class component to vue options API, after that, the casted component could be used as a native vue component in where vue accepts it.
+
+[](./breaking-changes-toNative.ts ':include :type=code typescript')
+
+### Depreactate init class property despends on another in constructor
+
+This is not allowed now.
+
+[](./breaking-changes-classProperty.ts ':include :type=code typescript')
+
+### Remove `index-return-cons`
+
+Remove `vue-facing-decorator/dist/index-return-cons`, you won't need this if `toNative` exists.

docs/en/next-version/next-version.md

@@ -1,6 +1,6 @@
 {
   "name": "vue-facing-decorator",
-  "version": "2.1.20",
+  "version": "3.0.0",
   "description": "Vue typescript class and decorator based component.",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -17,7 +17,9 @@
   ],
   "scripts": {
     "test-build": "npm run build && npm run test",
-    "test": "mocha -r ts-node/register test/test.ts",
+    "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",
     "build:cjs": "./node_modules/.bin/tsc",
     "build:esm": "./node_modules/.bin/tsc -outDir dist/esm -module ES6",
@@ -27,7 +29,6 @@
   },
   "author": "",
   "license": "MIT",
-  "types": "dist/index.d.ts",
   "peerDependencies": {
     "vue": "^3.0.0"
   },
@@ -52,5 +53,4 @@
     "type": "git",
     "url": "git@github.com:facing-dev/vue-facing-decorator.git"
   }
-
-}
+}

package.json

@@ -15,13 +15,13 @@ import { CustomRecords } from './custom/custom'
 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)
@@ -38,6 +38,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() {
@@ -89,33 +90,40 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
     option.emits = emits
 
 
+
     CustomRecords.forEach(rec => {
         rec.creator.apply({}, [option, rec.key])
     })
 
-    if (arg.setup) {
-        if (!option.setup) {
-            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) => {
-                        return Object.assign({}, arr[0], arr[1])
-                    })
-                } else {
-
-                    return Object.assign({}, newRet, oldRet)
-                }
 
+    arg.setup ??= function () { return {} }
+
+    if (!option.setup) {
+
+        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)
     }
@@ -138,27 +146,36 @@ function build(cons: Cons, option: ComponentOption) {
     }
     const component = buildComponent(cons, option, superSlot === null ? undefined : superSlot.cachedVueComponent)
     component.__vfdConstructor = cons
-    slot.cachedVueComponent = component
-
+    slot.cachedVueComponent = component;
+    (cons as any).__vccOpts = 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/component.ts

@@ -1,3 +1,4 @@
+import {compatibleMemberDecorator} from '../deco3/utils'
 type Creator = { (options: any, key: string): void }
 interface Record {
     key: string
@@ -8,12 +9,12 @@ interface Record {
 export const CustomRecords: Record[] = []
 
 export function createDecorator(creator: Creator) {
-    return function (proto: any, key: string) {
+    return compatibleMemberDecorator(function (proto: any, key: string) {
         CustomRecords.push({
             key,
             creator
         })
-    }
+    })
 }
 
 

src/custom/custom.ts

@@ -0,0 +1,42 @@
+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 ??= {};
+            proto[ctx.name!] = arg
+            return deco(proto, ctx.name)
+        } else {
+            return deco(arg, ctx)
+        }
+    }
+}