From bcb165df5cd0d4c34e553c96979867f22c15ec26 Mon Sep 17 00:00:00 2001
From: Emanuel Mutschlechner <emanuelmutschlechner@users.noreply.github.com>
Date: Sun, 3 Feb 2019 15:32:32 +0100
Subject: [PATCH] feat: Make props editable, closes #669 (#813)

* feat: Make props editable

* feat: switch in settings
---
 src/backend/index.js                             | 10 +++++++---
 .../views/settings/GlobalPreferences.vue         | 16 +++++++++++++++-
 src/shared-data.js                               |  6 ++++--
 src/util.js                                      |  9 +++++++++
 4 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/backend/index.js b/src/backend/index.js
index ec1a136d3..12c57b5ac 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -7,7 +7,7 @@ import { initEventsBackend } from './events'
 import { initRouterBackend } from './router'
 import { initPerfBackend } from './perf'
 import { findRelatedComponent } from './utils'
-import { stringify, classify, camelize, set, parse, getComponentName, getCustomRefDetails } from '../util'
+import { stringify, classify, camelize, set, has, parse, getComponentName, getCustomRefDetails } from '../util'
 import ComponentSelector from './component-selector'
 import SharedData, { init as initSharedData } from 'src/shared-data'
 import { isBrowser, target } from 'src/devtools/env'
@@ -629,7 +629,8 @@ function processProps (instance) {
           required: !!prop.required
         } : {
           type: 'invalid'
-        }
+        },
+        editable: SharedData.editableProps
       })
     }
     return propsData
@@ -959,7 +960,10 @@ function setStateValue ({ id, path, value, newKey, remove }) {
         $set: hook.Vue.set,
         $delete: hook.Vue.delete
       } : instance
-      set(instance._data, path, parsedValue, (obj, field, value) => {
+      const data = has(instance._props, path, newKey)
+        ? instance._props
+        : instance._data
+      set(data, path, parsedValue, (obj, field, value) => {
         (remove || newKey) && api.$delete(obj, field)
         !remove && api.$set(obj, newKey || field, value)
       })
diff --git a/src/devtools/views/settings/GlobalPreferences.vue b/src/devtools/views/settings/GlobalPreferences.vue
index e551e0b15..d2e8b6502 100644
--- a/src/devtools/views/settings/GlobalPreferences.vue
+++ b/src/devtools/views/settings/GlobalPreferences.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="global-preferences preferences">
-    <VueFormField title="Normalize Component Names">
+    <VueFormField title="Normalize component names">
       <VueGroup
         :value="$shared.classifyComponents"
         class="extend"
@@ -58,5 +58,19 @@
         />
       </VueGroup>
     </VueFormField>
+
+    <VueFormField title="Editable props">
+      <VueSwitch
+        :value="$shared.editableProps"
+        @input="$shared.editableProps = $event"
+      >
+        Enable <span class="dim">(may print warnings)</span>
+      </VueSwitch>
+    </VueFormField>
   </div>
 </template>
+
+<style lang="stylus" scoped>
+.dim
+  color $darkerGrey
+</style>
diff --git a/src/shared-data.js b/src/shared-data.js
index 0ad794f23..ddc6e01cc 100644
--- a/src/shared-data.js
+++ b/src/shared-data.js
@@ -8,14 +8,16 @@ const internalSharedData = {
   cacheVuexSnapshotsEvery: 50,
   cacheVuexSnapshotsLimit: 10,
   snapshotLoading: null,
-  recordPerf: false
+  recordPerf: false,
+  editableProps: false
 }
 
 const persisted = [
   'classifyComponents',
   'theme',
   'displayDensity',
-  'recordVuex'
+  'recordVuex',
+  'editableProps'
 ]
 
 // ---- INTERNALS ---- //
diff --git a/src/util.js b/src/util.js
index e5347a3f7..3cda5952d 100644
--- a/src/util.js
+++ b/src/util.js
@@ -519,6 +519,15 @@ export function get (object, path) {
   return object
 }
 
+export function has (object, path, parent = false) {
+  const sections = path.split('.')
+  const size = !parent ? 1 : 2
+  while (sections.length > size) {
+    object = object[sections.shift()]
+  }
+  return object != null && object.hasOwnProperty(sections[0])
+}
+
 export function scrollIntoView (scrollParent, el, center = true) {
   const parentTop = scrollParent.scrollTop
   const parentHeight = scrollParent.offsetHeight