fix: avoid extended mixin missing own options (fix #467)

Author: ktsn

src/helpers.ts

@@ -6,7 +6,7 @@ export function Options<V extends Vue>(
   options: ComponentOptions & ThisType<V>
 ): <VC extends VueConstructor<VueBase>>(target: VC) => VC {
   return (Component) => {
-    Component.__vccBase = options
+    Component.__o = options
     return Component
   }
 }
@@ -34,13 +34,13 @@ export function createDecorator(
       typeof target === 'function'
         ? target
         : (target.constructor as VueConstructor)
-    if (!Ctor.__vccDecorators) {
-      Ctor.__vccDecorators = []
+    if (!Ctor.__d) {
+      Ctor.__d = []
     }
     if (typeof index !== 'number') {
       index = undefined
     }
-    Ctor.__vccDecorators.push((options) => factory(options, key, index))
+    Ctor.__d.push((options) => factory(options, key, index))
   }
 }
 
@@ -59,8 +59,8 @@ export type MixedVueBase<Mixins extends VueMixin[]> = Mixins extends (infer T)[]
 export function mixins<T extends VueMixin[]>(...Ctors: T): MixedVueBase<T>
 export function mixins(...Ctors: VueMixin[]): VueConstructor {
   return class MixedVue extends Vue {
-    static __vccExtend(options: ComponentOptions) {
-      Ctors.forEach((Ctor) => Ctor.__vccExtend(options))
+    static __b: ComponentOptions = {
+      mixins: Ctors.map((Ctor) => Ctor.__vccOpts),
     }
 
     constructor(...args: any[]) {

src/vue.ts

@@ -46,25 +46,52 @@ function getSuper(Ctor: typeof VueImpl): typeof VueImpl | undefined {
   return superProto.constructor as typeof VueImpl
 }
 
+function getOwn<T extends Object, K extends keyof T>(
+  value: T,
+  key: K
+): T[K] | undefined {
+  return value.hasOwnProperty(key) ? value[key] : undefined
+}
+
 export interface VueStatic {
   // -- Class component configs
 
-  /** @internal */
-  __vccCache?: ComponentOptions
-
-  /** @internal */
-  __vccBase?: ComponentOptions
-
-  /** @internal */
-  __vccDecorators?: ((options: ComponentOptions) => void)[]
-
-  /** @internal */
-  __vccExtend: (options: ComponentOptions) => void
-
-  /** @internal */
-  __vccHooks: string[]
-
-  /** @internal */
+  /**
+   * @internal
+   * The cache of __vccOpts
+   */
+  __c?: ComponentOptions
+
+  /**
+   * @internal
+   * The base options specified to this class.
+   */
+  __b?: ComponentOptions
+
+  /**
+   * @internal
+   * Component options specified with `@Options` decorator
+   */
+  __o?: ComponentOptions
+
+  /**
+   * @internal
+   * Decorators applied to this class.
+   */
+  __d?: ((options: ComponentOptions) => void)[]
+
+  /**
+   * @internal
+   * Registered (lifecycle) hooks that will be ported from class methods
+   * into component options.
+   */
+  __h: string[]
+
+  /**
+   * @internal
+   * Final component options object that Vue core processes.
+   * The name must be __vccOpts since it is the contract with the Vue core.
+   */
   __vccOpts: ComponentOptions
 
   // --- Vue Loader etc injections
@@ -147,17 +174,7 @@ export interface VueConstructor<V extends VueBase = Vue> extends VueMixin<V> {
 }
 
 class VueImpl {
-  /** @internal */
-  static __vccCache?: ComponentOptions
-
-  /** @internal */
-  static __vccBase?: ComponentOptions
-
-  /** @internal */
-  static __vccDecorators?: ((options: ComponentOptions) => void)[]
-
-  /** @internal */
-  static __vccHooks = [
+  static __h = [
     'data',
     'beforeCreate',
     'created',
@@ -174,35 +191,34 @@ class VueImpl {
     'serverPrefetch',
   ]
 
-  /** @internal */
-  static __vccExtend(options: ComponentOptions) {
-    options.mixins = options.mixins || []
-    options.mixins.push(this.__vccOpts)
-  }
-
-  /** @internal */
   static get __vccOpts(): ComponentOptions {
     // Early return if `this` is base class as it does not have any options
     if (this === Vue) {
       return {}
     }
 
-    const cache = this.hasOwnProperty('__vccCache') && this.__vccCache
+    const Ctor = this as VueConstructor
+
+    const cache = getOwn(Ctor, '__c')
     if (cache) {
       return cache
     }
 
-    const Ctor = this
-
     // If the options are provided via decorator use it as a base
-    const options = (this.__vccCache = this.hasOwnProperty('__vccBase')
-      ? { ...this.__vccBase }
-      : {})
+    const options: ComponentOptions = { ...getOwn(Ctor, '__o') }
+    Ctor.__c = options
 
     // Handle super class options
     const Super = getSuper(Ctor)
     if (Super) {
-      Super.__vccExtend(options)
+      options.extends = Super.__vccOpts
+    }
+
+    // Inject base options as a mixin
+    const base = getOwn(Ctor, '__b')
+    if (base) {
+      options.mixins = options.mixins || []
+      options.mixins.unshift(base)
     }
 
     options.methods = { ...options.methods }
@@ -215,7 +231,7 @@ class VueImpl {
       }
 
       // hooks
-      if (Ctor.__vccHooks.indexOf(key) > -1) {
+      if (Ctor.__h.indexOf(key) > -1) {
         ;(options as any)[key] = (proto as any)[key]
         return
       }
@@ -280,8 +296,7 @@ class VueImpl {
       return promise ?? plainData
     }
 
-    const decorators =
-      this.hasOwnProperty('__vccDecorators') && this.__vccDecorators
+    const decorators = getOwn(Ctor, '__d')
     if (decorators) {
       decorators.forEach((fn) => fn(options))
     }
@@ -305,7 +320,7 @@ class VueImpl {
   }
 
   static registerHooks(keys: string[]): void {
-    this.__vccHooks.push(...keys)
+    this.__h.push(...keys)
   }
 
   static props(Props: { new (): unknown }): VueConstructor {
@@ -318,8 +333,8 @@ class VueImpl {
     })
 
     class PropsMixin extends this {
-      static __vccExtend(options: ComponentOptions) {
-        options.props = props
+      static __b: ComponentOptions = {
+        props,
       }
     }
     return PropsMixin as VueConstructor

test/specs/test.spec.ts

@@ -348,6 +348,45 @@ describe('vue-class-component', () => {
     expect(root.valueB).toBe(456)
   })
 
+  it('nested mixins', () => {
+    class GrandParentA extends Vue {
+      get a() {
+        return 'Hello'
+      }
+    }
+
+    class GrandParentB extends Vue {
+      get b() {
+        return 'World'
+      }
+    }
+
+    class ParentA extends mixins(GrandParentA, GrandParentB) {
+      get helloWorld() {
+        return this.a + this.b
+      }
+    }
+
+    class ParentB extends Vue {
+      get c() {
+        return 'Foobar'
+      }
+    }
+
+    class App extends mixins(ParentA, ParentB) {
+      get d() {
+        return 'Test'
+      }
+    }
+
+    const { root } = mount(App)
+    expect(root.a).toBe('Hello')
+    expect(root.b).toBe('World')
+    expect(root.helloWorld).toBe('HelloWorld')
+    expect(root.c).toBe('Foobar')
+    expect(root.d).toBe('Test')
+  })
+
   it('props class', () => {
     class Props {
       foo?: string