fix(vue3): computed/inject from mixins/extends

vuejs/core#3566

Author: Akryum

packages/app-backend-vue3/src/components/data.ts

@@ -2,7 +2,7 @@ import { BackendContext } from '@vue-devtools/app-backend-api'
 import { getInstanceName, getUniqueComponentId } from './util'
 import { camelize, get, set } from '@vue-devtools/shared-utils'
 import SharedData from '@vue-devtools/shared-utils/lib/shared-data'
-import { HookPayloads, Hooks, InspectedComponentData } from '@vue/devtools-api'
+import { ComponentInstance, HookPayloads, Hooks, InspectedComponentData } from '@vue/devtools-api'
 import { returnError } from '../util'
 
 /**
@@ -18,13 +18,14 @@ export function getInstanceDetails (instance: any, ctx: BackendContext): Inspect
 }
 
 function getInstanceState (instance) {
+  const mergedType = resolveMergedOptions(instance)
   return processProps(instance).concat(
     processState(instance),
     processSetupState(instance),
-    processComputed(instance),
+    processComputed(instance, mergedType),
     processAttrs(instance),
     processProvide(instance),
-    processInject(instance),
+    processInject(instance, mergedType),
     processRefs(instance)
   )
 }
@@ -173,8 +174,8 @@ function getSetupStateInfo (raw: any) {
  * @param {Vue} instance
  * @return {Array}
  */
-function processComputed (instance) {
-  const type = instance.type
+function processComputed (instance, mergedType) {
+  const type = mergedType
   const computed = []
   const defs = type.computed || {}
   // use for...in here because if 'computed' is not defined
@@ -215,17 +216,17 @@ function processProvide (instance) {
     }))
 }
 
-function processInject (instance) {
-  if (!instance.type || !instance.type.inject) return []
+function processInject (instance, mergedType) {
+  if (!mergedType?.inject) return []
   let keys = []
-  if (Array.isArray(instance.type.inject)) {
-    keys = instance.type.inject.map(key => ({
+  if (Array.isArray(mergedType.inject)) {
+    keys = mergedType.inject.map(key => ({
       key,
       originalKey: key
     }))
   } else {
-    keys = Object.keys(instance.type.inject).map(key => {
-      const value = instance.type.inject[key]
+    keys = Object.keys(mergedType.inject).map(key => {
+      const value = mergedType.inject[key]
       let originalKey
       if (typeof value === 'string') {
         originalKey = value
@@ -323,3 +324,45 @@ export function getCustomInstanceDetails (instance) {
     }
   }
 }
+
+function resolveMergedOptions (
+  instance: ComponentInstance
+) {
+  const raw = instance.type
+  const { mixins, extends: extendsOptions } = raw
+  const globalMixins = instance.appContext.mixins
+  if (!globalMixins.length && !mixins && !extendsOptions) return raw
+  const options = {}
+  globalMixins.forEach(m => mergeOptions(options, m, instance))
+  mergeOptions(options, raw, instance)
+  return options
+}
+
+function mergeOptions (
+  to: any,
+  from: any,
+  instance: ComponentInstance
+) {
+  if (typeof from === 'function') {
+    from = from.options
+  }
+
+  const { mixins, extends: extendsOptions } = from
+
+  extendsOptions && mergeOptions(to, extendsOptions, instance)
+  mixins &&
+    mixins.forEach((m) =>
+      mergeOptions(to, m, instance)
+    )
+
+  for (const key of ['computed', 'inject']) {
+    if (Object.prototype.hasOwnProperty.call(from, key)) {
+      if (!to[key]) {
+        to[key] = from[key]
+      } else {
+        Object.assign(to[key], from[key])
+      }
+    }
+  }
+  return to
+}

packages/shell-dev-vue3/src/App.vue

@@ -14,6 +14,7 @@ import Other from './Other.vue'
 import SetupRender from './SetupRender.js'
 import Form from './Form.vue'
 import Heavy from './Heavy.vue'
+import Mixins from './Mixins.vue'
 
 import { h } from 'vue'
 
@@ -36,6 +37,7 @@ export default {
     SetupRender,
     Form,
     Heavy,
+    Mixins,
     inline: {
       render: () => h('h3', 'Inline component definition')
     }
@@ -82,6 +84,7 @@ export default {
   <Other />
   <SetupRender />
   <Form />
+  <Mixins />
   <inline />
   <global />
 

packages/shell-dev-vue3/src/Mixins.vue

@@ -0,0 +1,106 @@
+<script>
+export default {
+  extends: {
+    extends: {
+      data () {
+        return {
+          dataFromExtendsExtends: 'hey'
+        }
+      },
+
+      computed: {
+        computedFromExtendsExtends () {
+          return 'extends extends:' + this.dataFromMixinExtends
+        }
+      },
+
+      inject: {
+        meow: {
+          from: 'cat',
+          default: 'Meow'
+        }
+      }
+    },
+
+    mixins: [
+      {
+        data () {
+          return {
+            dataFromExtendsMixin: 'cat'
+          }
+        },
+
+        computed: {
+          computedFromExtendsMixin () {
+            return 'extends mixin:' + this.dataFromMixinMixin
+          }
+        }
+      }
+    ],
+
+    data () {
+      return {
+        dataFromExtends: 'meow'
+      }
+    },
+
+    computed: {
+      computedFromExtends () {
+        return 'extends:' + this.dataFromExtends
+      }
+    }
+  },
+  mixins: [
+    {
+      extends: {
+        data () {
+          return {
+            dataFromMixinExtends: 'cheese'
+          }
+        },
+
+        computed: {
+          computedFromMixinExtends () {
+            return 'mixin extends:' + this.dataFromMixinExtends
+          }
+        }
+      },
+
+      mixins: [
+        {
+          data () {
+            return {
+              dataFromMixinMixin: 'waf'
+            }
+          },
+
+          computed: {
+            computedFromMixinMixin () {
+              return 'mixin mixin:' + this.dataFromMixinMixin
+            }
+          }
+        }
+      ],
+
+      data () {
+        return {
+          dataFromMixin: '42'
+        }
+      },
+
+      computed: {
+        computedFromMixin () {
+          return 'mixin:' + this.dataFromMixin
+        }
+      }
+    }
+  ]
+}
+</script>
+
+<template>
+  <input v-model="dataFromExtends">
+  {{ computedFromExtends }}
+  <input v-model="dataFromMixin">
+  {{ computedFromMixin }}
+</template>