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

This PR fixes vuejs#734 


Co-authored-by: Guillaume Chau <alphadelta.fg@gmail.com>

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"')
+ })
+ })
 })

shells/dev/target/Other.vue

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

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"

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.
  *

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 {