2.0 ready

ruojianll · ruojianll · commit 11bcb34205f6 · 2022-06-10T14:50:46.000+08:00
diff --git a/docs/class-component/component/code-option-components.ts b/docs/class-component/component/code-option-components.ts
@@ -20,7 +20,7 @@ Vue option component
         MyAnotherComponent
     }
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
 
diff --git a/docs/class-component/component/code-option-directives.ts b/docs/class-component/component/code-option-directives.ts
@@ -15,6 +15,6 @@ Vue option component
         MyDirective: {}
     }
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/component/code-option-emits.ts b/docs/class-component/component/code-option-emits.ts
@@ -11,6 +11,6 @@ Vue option component
 @Component({
     emits: ['MyEvent']
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/component/code-option-expose.ts b/docs/class-component/component/code-option-expose.ts
@@ -11,6 +11,6 @@ Vue option component
 @Component({
     expose: ['Name']
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/component/code-option-inherit-attrs.ts b/docs/class-component/component/code-option-inherit-attrs.ts
@@ -11,6 +11,6 @@ Vue option component
 @Component({
     inheritAttrs: true
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/component/code-option-mixins.ts b/docs/class-component/component/code-option-mixins.ts
@@ -16,6 +16,6 @@ Vue option component
 @Component({
     mixins: [VueComponent]
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/component/code-option-modifier.ts b/docs/class-component/component/code-option-modifier.ts
@@ -18,6 +18,6 @@ Vue option component
         option.methods.customMethod = function () { }
     }
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/component/code-option-name.ts b/docs/class-component/component/code-option-name.ts
@@ -10,6 +10,6 @@ Vue option component
 @Component({
     name:'VueComponentName'
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/component/code-option-options.ts b/docs/class-component/component/code-option-options.ts
@@ -12,6 +12,6 @@ Vue option component
         name: 'VueComponentName'
     }
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/component/code-option-provide.ts b/docs/class-component/component/code-option-provide.ts
@@ -15,6 +15,6 @@ Vue option component
         key: 'value'
     }
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/component/code-option-render.ts b/docs/class-component/component/code-option-render.ts
@@ -15,6 +15,6 @@ Vue option component
         
     }
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/component/code-option-template.ts b/docs/class-component/component/code-option-template.ts
@@ -11,6 +11,6 @@ Vue option component
 @Component({
     template: '<div>template</div>'
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/component/code-usage-base.ts b/docs/class-component/component/code-usage-base.ts
@@ -9,6 +9,6 @@ class MyComponent extends Vue {
 @Component({
     //Set your options here.
 })
-class MyComponentWithOptions extends Vue {
+export default class MyComponentWithOptions extends Vue {
 
 }
diff --git a/docs/class-component/event/code-asynchronous.ts b/docs/class-component/event/code-asynchronous.ts
@@ -18,7 +18,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     @Emit
     triggerAsyncEvent() {
         return new Promise((resolver) => {
diff --git a/docs/class-component/event/code-usage.ts b/docs/class-component/event/code-usage.ts
@@ -16,7 +16,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     @Emit
     triggerMethodNameEvent(){
         return 'triggerMethodNameEvent value'
diff --git a/docs/class-component/getter/code-usage.ts b/docs/class-component/getter/code-usage.ts
@@ -13,7 +13,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     get getter() {
         return 'value'
     }
diff --git a/docs/class-component/injection/code-option-default.ts b/docs/class-component/injection/code-option-default.ts
@@ -13,7 +13,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     @Inject({
         default: 'default name'
     })
diff --git a/docs/class-component/injection/code-option-from.ts b/docs/class-component/injection/code-option-from.ts
@@ -13,7 +13,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     @Inject({
         from:'name'
     })
diff --git a/docs/class-component/injection/code-usage.ts b/docs/class-component/injection/code-usage.ts
@@ -11,7 +11,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     @Inject
     readonly name!: string
 }
diff --git a/docs/class-component/lifecycle-hook/code-for-other-names.ts b/docs/class-component/lifecycle-hook/code-for-other-names.ts
@@ -17,6 +17,6 @@ Vue option component
         option.hook2 = function () { }
     }
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
 
 }
diff --git a/docs/class-component/lifecycle-hook/code-usage.ts b/docs/class-component/lifecycle-hook/code-usage.ts
@@ -11,7 +11,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     mounted(){
 
     }
diff --git a/docs/class-component/method/code-usage.ts b/docs/class-component/method/code-usage.ts
@@ -13,7 +13,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     method(){
 
     }
diff --git a/docs/class-component/property/code-usage.ts b/docs/class-component/property/code-usage.ts
@@ -13,6 +13,6 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     property = 'property value'
 }
diff --git a/docs/class-component/reference/code-usage.ts b/docs/class-component/reference/code-usage.ts
@@ -18,7 +18,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     @Ref
     readonly refEl!: HTMLDivElement
 }
diff --git a/docs/class-component/watcher/code-option-deep.ts b/docs/class-component/watcher/code-option-deep.ts
@@ -23,7 +23,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     property = "value"
 
     @Watch("property", {
diff --git a/docs/class-component/watcher/code-option-flush.ts b/docs/class-component/watcher/code-option-flush.ts
@@ -23,7 +23,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     property = "value"
 
     @Watch("property", {
diff --git a/docs/class-component/watcher/code-option-immediate.ts b/docs/class-component/watcher/code-option-immediate.ts
@@ -23,7 +23,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     property = "value"
 
     @Watch("property", {
diff --git a/docs/class-component/watcher/code-usage.ts b/docs/class-component/watcher/code-usage.ts
@@ -22,7 +22,7 @@ Vue option component
 */
 
 @Component
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     property = "value"
 
     @Watch("property")
diff --git a/docs/inheritance/complex-example/code-example.ts b/docs/inheritance/complex-example/code-example.ts
@@ -21,7 +21,7 @@ class CompSuper extends SuperComp {
 @Component({
     mixins: [VueNativeComponent]
 })
-export class Comp extends CompSuper {
+export default class Comp extends CompSuper {
 
 }
 
diff --git a/docs/inheritance/component/code-example.ts b/docs/inheritance/component/code-example.ts
@@ -20,6 +20,6 @@ class SuperComponent extends Vue {
 @Component({
     name: "MyComponent"
 })
-class MyComponent extends SuperComponent {
+export default class MyComponent extends SuperComponent {
 
 }
diff --git a/docs/inheritance/component/code-native.ts b/docs/inheritance/component/code-native.ts
@@ -26,7 +26,7 @@ interface VueNativeComponentContext {
     name: "MyComponent",
     mixins: [VueNativeComponent]
 })
-class MyComponent extends Vue {
+export default class MyComponent extends Vue {
     get VueNativeComponentContext(): VueNativeComponentContext {
         return this as any
     }
diff --git a/docs/inheritance/component/component.md b/docs/inheritance/component/component.md
@@ -1,6 +1,6 @@
 ## Usage
 
-Use decorator `ComponentBase` to define a super component.
+Use decorator `ComponentBase` to define a super component. It's parameter is same to decorator `Component`'s.
 
 Components which `vue-facing-decorator` generated can inherit another directly.
 
diff --git a/docs/inheritance/es-class/code-example.ts b/docs/inheritance/es-class/code-example.ts
@@ -41,7 +41,7 @@ class Super extends Vue {
 }
 
 @Component
-class MyComponent extends Super {
+export default class MyComponent extends Super {
     propertyB = 'from MyComponent'
 
     property = 'from MyComponent'
diff --git a/src/component.ts b/src/component.ts
@@ -1,5 +1,5 @@
 import { defineComponent, ComponentCustomOptions } from 'vue';
-import { obtainSlot, extendSlotPath } from './utils'
+import { obtainSlot, getSuperSlot } from './utils'
 import { build as optionComputed } from './option/computed'
 import { build as optionData } from './option/data'
 import { build as optionMethodsAndLifecycle } from './option/methodsAndLifecycle'
@@ -62,22 +62,16 @@ type ComponentOption = {
     mixins?: any[]
 }
 type ComponentConsOption = Cons | ComponentOption
-function ComponentStep(cons: Cons, extend?: any) {
-    return defineComponent(ComponentOption(cons, extend))
-}
-
-function ComponentStepWithOption(cons: Cons, arg: ComponentOption, extend?: any): any {
+function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
     let option = ComponentOption(cons, extend)
     const slot = obtainSlot(cons.prototype)
-
     Object.keys(arg).reduce<Record<string, any>>((option, name: string) => {
         if (['options', 'modifier', 'emits'].includes(name)) {
             return option
         }
         option[name] = arg[name as keyof ComponentOption]
         return option
     }, option)
-
     let emits = Array.from(slot.obtainMap('emits').keys())
     if (Array.isArray(arg.emits)) {
         emits = Array.from(new Set([...emits, ...arg.emits]))
@@ -92,46 +86,39 @@ function ComponentStepWithOption(cons: Cons, arg: ComponentOption, extend?: any)
     }
     return defineComponent(option)
 }
-
-export function ComponentBase(cons: Cons) {
+function build(cons: Cons, option: ComponentOption) {
     const slot = obtainSlot(cons.prototype)
     slot.inComponent = true
-    return cons
-}
-
-export function Component(arg: ComponentConsOption) {
-    function extend(cons: Cons) {
-        ComponentBase(cons)
-        const slotPath = extendSlotPath(cons.prototype)
-        slotPath.forEach(proto => {
-            const slot = obtainSlot(proto)
-            if (!slot.inComponent) {
-                throw 'Class should be decorated by Component or ComponentBase: ' + proto.constructor
-            }
-        })
-
-        return slotPath.reduceRight<any>((pv, cv, ci) => {
-            if (ci > 0) {
-                return ComponentStep(cv.constructor, pv === null ? undefined : pv)
-            } else {
-
-                if (typeof arg === 'function') {
-                    return ComponentStepWithOption(cv.constructor, {}, pv === null ? undefined : pv)
-                } else {
-                    return ComponentStepWithOption(cv.constructor, arg, pv === null ? undefined : pv)
-                }
-            }
-        }, null)
+    const superSlot = getSuperSlot(cons.prototype)
+    if (superSlot) {
+        if (!superSlot.inComponent) {
+            throw 'Class should be decorated by Component or ComponentBase: ' + slot.master
+        }
+        if (superSlot.cachedVueComponent === null) {
+            throw 'Component decorator 1'
+        }
     }
+    const component = buildComponent(cons, option, superSlot === null ? undefined : superSlot.cachedVueComponent)
+    slot.cachedVueComponent = component
+}
+function _Component(arg: ComponentConsOption, cb: (cons: Cons, option: ComponentOption) => any) {
     if (typeof arg === 'function') {
-
-        const finalComp = extend(arg)
-        return finalComp
+        return cb(arg, {})
     }
     return function (cons: Cons) {
-
-        const finalComp = extend(cons)
-
-        return finalComp
+        return cb(cons, arg)
     }
+}
+export function ComponentBase(arg: ComponentConsOption): any {
+    return _Component(arg, function (cons: Cons, option: ComponentOption) {
+        build(cons, option)
+        return cons
+    })
+}
+
+export function Component(arg: ComponentConsOption): any {
+    return _Component(arg, function (cons: Cons, option: ComponentOption) {
+        build(cons, option)
+        return obtainSlot(cons.prototype).cachedVueComponent
+    })
 }
diff --git a/src/utils.ts b/src/utils.ts
diff --git a/test/feature/componentExtends.ts b/test/feature/componentExtends.ts
diff --git a/test/internal/utils.ts b/test/internal/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ Vue option component`
`20`	`20`	`MyAnotherComponent`
`21`	`21`	`}`
`22`	`22`	`})`
`23`		`-class MyComponent extends Vue {`
	`23`	`+export default class MyComponent extends Vue {`
`24`	`24`
`25`	`25`	`}`
`26`	`26`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,6 @@ Vue option component`
`15`	`15`	`MyDirective: {}`
`16`	`16`	`}`
`17`	`17`	`})`
`18`		`-class MyComponent extends Vue {`
	`18`	`+export default class MyComponent extends Vue {`
`19`	`19`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,6 @@ Vue option component`
`11`	`11`	`@Component({`
`12`	`12`	`emits: ['MyEvent']`
`13`	`13`	`})`
`14`		`-class MyComponent extends Vue {`
	`14`	`+export default class MyComponent extends Vue {`
`15`	`15`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,6 @@ Vue option component`
`16`	`16`	`@Component({`
`17`	`17`	`mixins: [VueComponent]`
`18`	`18`	`})`
`19`		`-class MyComponent extends Vue {`
	`19`	`+export default class MyComponent extends Vue {`
`20`	`20`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,6 @@ Vue option component`
`18`	`18`	`option.methods.customMethod = function () { }`
`19`	`19`	`}`
`20`	`20`	`})`
`21`		`-class MyComponent extends Vue {`
	`21`	`+export default class MyComponent extends Vue {`
`22`	`22`
`23`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,6 @@ Vue option component`
`10`	`10`	`@Component({`
`11`	`11`	`name:'VueComponentName'`
`12`	`12`	`})`
`13`		`-class MyComponent extends Vue {`
	`13`	`+export default class MyComponent extends Vue {`
`14`	`14`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,6 @@ Vue option component`
`12`	`12`	`name: 'VueComponentName'`
`13`	`13`	`}`
`14`	`14`	`})`
`15`		`-class MyComponent extends Vue {`
	`15`	`+export default class MyComponent extends Vue {`
`16`	`16`
`17`	`17`	`}`