From 6338a63fc4f7e5f79fd350d8ce322f4678e8c531 Mon Sep 17 00:00:00 2001
From: Ilkwon Sim <simsim0709@gmail.com>
Date: Sat, 26 Jan 2019 02:09:00 +0900
Subject: [PATCH] feat: Add $attrs to StateInspector, closes #734 (#861)

This PR fixes #734


Co-authored-by: Guillaume Chau <alphadelta.fg@gmail.com>
---
 cypress/integration/components-tab.js      |  9 +++++++++
 shells/dev/target/Other.vue                |  1 +
 shells/dev/target/Target.vue               |  2 +-
 src/backend/index.js                       | 13 ++++++++++++-
 src/devtools/components/StateInspector.vue |  3 ++-
 5 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/components-tab.js b/cypress/integration/components-tab.js
index 69048607c..0cfafedcd 100644
--- a/cypress/integration/components-tab.js
+++ b/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 --git a/shells/dev/target/Other.vue b/shells/dev/target/Other.vue
index 474020c6c..3dfa81203 100644
--- a/shells/dev/target/Other.vue
+++ b/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 --git a/shells/dev/target/Target.vue b/shells/dev/target/Target.vue
index 6d743deb2..f0af9eb3d 100644
--- a/shells/dev/target/Target.vue
+++ b/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 --git a/src/backend/index.js b/src/backend/index.js
index 98cf2e3e6..ec1a136d3 100644
--- a/src/backend/index.js
+++ b/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 --git a/src/devtools/components/StateInspector.vue b/src/devtools/components/StateInspector.vue
index 6d5cb780f..8182f93d4 100644
--- a/src/devtools/components/StateInspector.vue
+++ b/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 {