feat: Make props editable, closes vuejs#669 (vuejs#813)

* feat: Make props editable

* feat: switch in settings

Author: emanuelmutschlechner

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)
       })

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>

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 ---- //

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