feat: show injected properties (#659)

* show injected properties

* test: injected props

Author: hosmelq

cypress/integration/components-tab.js

@@ -92,4 +92,16 @@ suite('components tab', () => {
     cy.get('.instance .self .attr-title').contains('key')
     cy.get('.instance .self .attr-value').contains('1')
   })
+
+  it('should display injected props', () => {
+    cy.get('.left .search input').clear().type('Mine')
+    cy.get('.instance').eq(1).click()
+    cy.get('.right .data-wrapper').then(el => {
+      expect(el.text()).to.contain('injected')
+      expect(el.text()).to.contain('answer:42')
+      expect(el.text()).to.contain('foo:"bar"')
+      expect(el.text()).to.contain('noop:ƒ noop(a, b, c)')
+    })
+    cy.get('.left .search input').clear()
+  })
 })

shells/dev/target/Other.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     Other {{ id }}
-    <mine></mine>
+    <mine/>
   </div>
 </template>
 
@@ -18,8 +18,13 @@ const computedPropMixin = {
 
 export default {
   name: 'other-with-mine',
-  props: ['id'],
   mixins: [computedPropMixin],
+  provide: {
+    foo: 'bar',
+    noop: (a, b, c) => {},
+    answer: 42
+  },
+  props: ['id'],
   data () {
     const a = { c: function () {} }
     a.a = a
@@ -32,6 +37,7 @@ export default {
   },
   components: {
     mine: {
+      inject: ['foo', 'noop', 'answer'],
       render: h => h('div', { class: 'mine' }, 'mine'),
       data () {
         return {

src/backend/index.js

@@ -378,6 +378,7 @@ function getInstanceState (instance) {
   return processProps(instance).concat(
     processState(instance),
     processComputed(instance),
+    processInjected(instance),
     processRouteContext(instance),
     processVuexGetters(instance),
     processFirebaseBindings(instance),
@@ -563,6 +564,29 @@ function processComputed (instance) {
   return computed
 }
 
+/**
+ * Process Vuex getters.
+ *
+ * @param {Vue} instance
+ * @return {Array}
+ */
+
+function processInjected (instance) {
+  const injected = instance.$options.inject
+
+  if (injected) {
+    return Object.keys(injected).map(key => {
+      return {
+        key,
+        type: 'injected',
+        value: instance[key]
+      }
+    })
+  } else {
+    return []
+  }
+}
+
 /**
  * Process possible vue-router $route context
  *