feat: Add $attrs to StateInspector, closes #734 (#861)

This PR fixes #734 


Co-authored-by: Guillaume Chau <[email protected]>

Author: 2 people

Diff for: cypress/integration/components-tab.js

@@ -137,4 +137,13 @@ suite('components tab', () => {
       expect(el.text()).to.contain('tester:<p id="testing"')
     })
   })
+
+  it('should display $attrs', () => {
+    cy.get('.instance .instance:nth-child(2) .arrow-wrapper').click()
+    cy.get('.instance .instance .instance:nth-child(1) .item-name').click()
+    cy.get('.right .data-wrapper').then(el => {
+      expect(el.text()).to.contain('$attrs')
+      expect(el.text()).to.contain('attr:"some-attr"')
+    })
+  })
 })

Diff for: shells/dev/target/Other.vue

@@ -18,6 +18,7 @@ const computedPropMixin = {
 
 export default {
   name: 'other-with-mine',
+  inheritAttrs: false,
   mixins: [computedPropMixin],
   provide: {
     foo: 'bar',

Diff for: shells/dev/target/Target.vue

@@ -8,7 +8,7 @@
     <button class="add" @mouseup="add">Add 3</button>
     <button class="remove" @mousedown="rm">Remove</button>
     <input v-model="localMsg">
-    <other v-for="item in items" :key="item" :id="item"></other>
+    <other v-for="item in items" :key="item" :id="item" attr="some-attr"></other>
     <div>
       <button
         class="inspect"

Diff for: src/backend/index.js

@@ -539,7 +539,8 @@ function getInstanceState (instance) {
     processRouteContext(instance),
     processVuexGetters(instance),
     processFirebaseBindings(instance),
-    processObservables(instance)
+    processObservables(instance),
+    processAttrs(instance)
   )
 }
 
@@ -637,6 +638,16 @@ function processProps (instance) {
   }
 }
 
+function processAttrs (instance) {
+  return Object.entries(instance.$attrs).map(([key, value]) => {
+    return {
+      type: '$attrs',
+      key,
+      value
+    }
+  })
+}
+
 /**
  * Convert prop type constructor to string.
  *

Diff for: src/devtools/components/StateInspector.vue

@@ -65,7 +65,8 @@ const keyOrder = {
   getters: 3,
   mutation: 1,
   'vuex bindings': 5,
-  $refs: 6
+  $refs: 6,
+  $attrs: 7
 }
 
 export default {