v3

Author: ruojianll

.github/FUNDING.yml

@@ -0,0 +1 @@
+open_collective: vue-facing-decorator

.npmignore

@@ -1,5 +1,6 @@
 /docs
 /test
+/changelog
 /.github
 /.gitignore
 /.editorconfig

changelog/v3.0.0.md

@@ -0,0 +1,56 @@
+# Description
+
+In v3.0.0, v-f-d is compatible with both decorators API stage 3 and stage 2 now.
+
+# Decorators API stage 3
+
+To enable this, you need to update TypeScript to 5.x and set `compilerOptions.experimentalDecorators` to `false` (value `true` for stage 2). 
+
+> Currently some vue libraries(e.g. Volar) may not compatible with TypeScript 5.x.
+
+# Breaking changes
+
+### Cast class component to vue options API
+
+Using `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.
+
+> Currently `toNative` is not necessary, because v-f-d use a vue internal API, but it is not stable and may missing in the future vue verions. So `toNameve` is recommended.
+
+```typescript
+@Component
+export class MyComp extends Vue{}
+export default toNative(MyComp)
+
+//Code also works currently:
+@Component
+export default class MyComp extends Vue{}
+```
+
+### Depreactate init class property despends on another in constructor
+
+This is not allowed now.
+```typescript
+@Component({
+    name: "MyComponent"
+})
+export class MyComponent extends Vue {
+    @Prop
+    prop!: string
+
+    field = this.prop // this is deprecated, it will be undefined
+}
+
+export default toNative(MyComponent)
+```
+
+### Remove `index-return-cons`
+
+Remove `vue-facing-decorator/dist/index-return-cons`, you won't need this if `toNative` exists.
+
+# What's new
+
+* `createDecorator` has a preserve option. see docs.
+
+* `v-model` sets event name in emits option now.
+
+

package.json

@@ -1,10 +1,6 @@
 {
   "name": "vue-facing-decorator",
-<<<<<<< HEAD
-  "version": "3.0.0-beta.2",
-=======
-  "version": "2.1.20",
->>>>>>> master
+  "version": "3.0.0",
   "description": "Vue typescript class and decorator based component.",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -21,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",
@@ -31,7 +29,6 @@
   },
   "author": "",
   "license": "MIT",
-
   "peerDependencies": {
     "vue": "^3.0.0"
   },
@@ -56,5 +53,4 @@
     "type": "git",
     "url": "[email protected]:facing-dev/vue-facing-decorator.git"
   }
-
-}
+}

src/component.ts

@@ -11,7 +11,6 @@ import { build as optionInject } from './option/inject'
 import { build as optionEmit } from './option/emit'
 import { build as optionVModel } from './option/vmodel'
 import { build as optionAccessor } from './option/accessor'
-import { CustomRecords } from './custom/custom'
 import type { SetupContext } from 'vue';
 import type { OptionBuilder } from './optionBuilder'
 import type { VueCons } from './index'
@@ -31,16 +30,10 @@ function ComponentOption(cons: Cons, extend?: any) {
     optionInject(cons, optionBuilder)
     optionEmit(cons, optionBuilder)
     optionRef(cons, optionBuilder)//after Computed
-    optionMethodsAndHooks(cons, optionBuilder)//after Ref Computed
     optionAccessor(cons, optionBuilder)
-
-
-    const setupFunction: OptionSetupFunction | undefined = optionBuilder.setup ? function (props, ctx) {
-        return optionBuilder.setup!(props, ctx)
-    } : undefined
-
+    optionMethodsAndHooks(cons, optionBuilder)//the last one
     const raw = {
-        setup: setupFunction,
+        setup: optionBuilder.setup,
         data() {
             delete optionBuilder.data
             optionData(cons, optionBuilder, this)
@@ -72,7 +65,9 @@ type ComponentOption = {
     mixins?: any[]
     setup?: ComponentSetupFunction
 }
+
 type ComponentConsOption = Cons | ComponentOption
+
 function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
     const option = ComponentOption(cons, extend)
     const slot = obtainSlot(cons.prototype)
@@ -83,25 +78,21 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
         option[name] = arg[name as keyof ComponentOption]
         return option
     }, option)
+
+    //apply event emits
     let emits = Array.from(slot.obtainMap('emits').keys())
     if (Array.isArray(arg.emits)) {
         emits = Array.from(new Set([...emits, ...arg.emits]))
     }
     option.emits = emits
 
-
-    CustomRecords.forEach(rec => {
-        rec.creator.apply({}, [option, rec.key])
-    })
-
-
-    arg.setup ??= function () { return {} }
+    //merge setup function
     if (!option.setup) {
         option.setup = arg.setup
     } else {
 
         const oldSetup: OptionSetupFunction = option.setup
-        const newSetup: ComponentSetupFunction = arg.setup
+        const newSetup: ComponentSetupFunction = arg.setup ?? function () { return {} }
 
         const setup: ComponentSetupFunction = function (props, ctx) {
             const newRet = newSetup(props, ctx)
@@ -121,12 +112,24 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
         option.setup = setup
     }
 
+    //custom decorator
+    const map = slot.getMap('customDecorator')
+    if (map && map.size > 0) {
+        map.forEach((v) => {
+            v.creator.apply({}, [option, v.key])
+        })
+    }
+
+    //shallow merge options
     if (arg.options) {
         Object.assign(option, arg.options)
     }
+
+    //apply modifier
     if (arg.modifier) {
         arg.modifier(option)
     }
+
     return defineComponent(option)
 }
 function build(cons: Cons, option: ComponentOption) {
@@ -143,8 +146,8 @@ 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(cb: (cons: Cons, option: ComponentOption) => any, arg: ComponentConsOption, ctx?: ClassDecoratorContext) {
     if (typeof arg === 'function') {

src/custom/custom.ts

@@ -1,19 +1,24 @@
+import { obtainSlot } from '../utils'
+import { compatibleMemberDecorator } from '../deco3/utils'
 type Creator = { (options: any, key: string): void }
-interface Record {
+export interface Record {
     key: string
     creator: Creator
+    preserve: boolean
 }
 
-// const CustomDecorators: CustomDecorator[] = []
-export const CustomRecords: Record[] = []
-
-export function createDecorator(creator: Creator) {
-    return function (proto: any, key: string) {
-        CustomRecords.push({
+export function createDecorator(creator: Creator, opt?: {
+    preserve?: boolean
+}) {
+    return compatibleMemberDecorator(function (proto: any, key: string) {
+        const slot = obtainSlot(proto)
+        const map = slot.obtainMap('customDecorator')
+        map.set(key, {
             key,
-            creator
+            creator,
+            preserve: !!opt?.preserve
         })
-    }
+    })
 }
 
 

src/index-return-cons.ts

@@ -0,0 +1,2 @@
+// This feature is deprecated and is preserved for compatibility
+export * from './index'

src/option/accessor.ts

@@ -1,14 +1,17 @@
 import type { Cons } from '../component'
-import { type OptionBuilder, applyAccessors} from '../optionBuilder'
+import { type OptionBuilder, applyAccessors } from '../optionBuilder'
 import { toComponentReverse, obtainSlot } from '../utils'
 
 export function build(cons: Cons, optionBuilder: OptionBuilder) {
     const slot = obtainSlot(cons.prototype)
-    const vanillaMap = slot.obtainMap('vanilla')
+    const vanillaMap = slot.getMap('vanilla')
+    if (!vanillaMap || vanillaMap.size === 0) {
+        return
+    }
     const protoArr = toComponentReverse(cons.prototype)
-    const map: Map<string, { get: (() => any) | undefined, set: ((v: any) => any) | undefined }> = new Map
+    const map: Map<string, { get: (() => any) | undefined, set: ((v: any) => any) | undefined }> | undefined = new Map
 
-    applyAccessors(optionBuilder,(ctx:any)=>{
+    applyAccessors(optionBuilder, (ctx: any) => {
         protoArr.forEach(proto => {
             const deses = Object.getOwnPropertyDescriptors(proto)
             for (const name in deses) {

src/option/data.ts

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

src/option/emit.ts

@@ -1,7 +1,6 @@
 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) {
@@ -14,25 +13,25 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
     optionBuilder.methods ??= {}
     const proto = cons.prototype
     const slot = obtainSlot(proto)
-    const names = slot.obtainMap('emit')
+    const names = slot.getMap('emit')
+    if (!names || names.size === 0) {
+        return
+    }
     const emits = slot.obtainMap('emits')
+    names.forEach((value, key) => {
+        const eventName = value === null ? key : value
+        emits.set(eventName, true)
+        optionBuilder.methods![key] = async function (this: any) {
 
-    if (names) {
-        names.forEach((value, key) => {
-            const eventName = value === null ? key : value
-            emits.set(eventName, true)
-            optionBuilder.methods![key] = async function (this: any) {
-
-                const ret = proto[key].apply(this, arguments)
-                if (ret instanceof Promise) {
-                    const proRet = await ret
-                    this.$emit(eventName, proRet)
-                }
-                else {
-                    this.$emit(eventName, ret)
-                }
+            const ret = proto[key].apply(this, arguments)
+            if (ret instanceof Promise) {
+                const proRet = await ret
+                this.$emit(eventName, proRet)
             }
-        })
-    }
+            else {
+                this.$emit(eventName, ret)
+            }
+        }
+    })
 
 }