From d4442d2be1a41c60fe86bb1e2be0e6ce69e665dd Mon Sep 17 00:00:00 2001
From: katashin <ktsn55@gmail.com>
Date: Mon, 21 May 2018 16:04:45 +0900
Subject: [PATCH] feat: allow to modify props and data in preview pane (#32)

* chore: add a json input component

* chore: retain modified scope of document

* chore: show document scope for rendering component

* chore: provide default value as scope to component catalog

* feat: enable to update props / data value in preview
---
 .../components/ComponentCatalogPreview.vue    |  27 ++-
 src/view/components/ContainerVueComponent.vue |  17 +-
 src/view/components/InputJson.vue             |  54 +++++
 src/view/components/PageMain.vue              |  10 +-
 src/view/components/Renderer.vue              |   9 +-
 src/view/components/ScopeInformation.vue      |  70 ++++--
 src/view/components/VueComponent.vue          |  33 +--
 src/view/store/modules/project.ts             | 110 +++++++++
 test/helpers/template.ts                      |  17 +-
 test/view/Renderer.spec.ts                    |  10 +
 test/view/store/project.spec.ts               | 215 ++++++++++++++++++
 11 files changed, 523 insertions(+), 49 deletions(-)
 create mode 100644 src/view/components/InputJson.vue

diff --git a/src/view/components/ComponentCatalogPreview.vue b/src/view/components/ComponentCatalogPreview.vue
index 55c575d..29cabf0 100644
--- a/src/view/components/ComponentCatalogPreview.vue
+++ b/src/view/components/ComponentCatalogPreview.vue
@@ -5,8 +5,7 @@
         :uri="component.uri"
         :template="component.template"
         :styles="component.styleCode"
-        :props="component.props"
-        :data="component.data"
+        :scope="scope"
         :child-components="component.childComponents"
       />
     </div>
@@ -16,7 +15,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import VueComponent from './VueComponent.vue'
-import { ScopedDocument } from '../store/modules/project'
+import { ScopedDocument, DocumentScope } from '../store/modules/project'
 
 export default Vue.extend({
   name: 'ComponentCatalogPreview',
@@ -30,6 +29,28 @@ export default Vue.extend({
       type: Object as () => ScopedDocument,
       required: true
     }
+  },
+
+  computed: {
+    scope(): DocumentScope {
+      const scope: DocumentScope = { props: {}, data: {} }
+
+      this.component.props.forEach(prop => {
+        scope.props[prop.name] = {
+          type: prop.type,
+          value: prop.default
+        }
+      })
+
+      this.component.data.forEach(d => {
+        scope.data[d.name] = {
+          type: null,
+          value: d.default
+        }
+      })
+
+      return scope
+    }
   }
 })
 </script>
diff --git a/src/view/components/ContainerVueComponent.vue b/src/view/components/ContainerVueComponent.vue
index daa0bbe..b546422 100644
--- a/src/view/components/ContainerVueComponent.vue
+++ b/src/view/components/ContainerVueComponent.vue
@@ -3,8 +3,7 @@
     v-if="document"
     :uri="uri"
     :template="document.template"
-    :props="document.props"
-    :data="document.data"
+    :scope="scope"
     :child-components="document.childComponents"
     :styles="document.styleCode"
     :props-data="propsData"
@@ -14,7 +13,11 @@
 <script lang="ts">
 import Vue from 'vue'
 import VueComponent from './VueComponent.vue'
-import { ScopedDocument, projectHelpers } from '../store/modules/project'
+import {
+  ScopedDocument,
+  projectHelpers,
+  DocumentScope
+} from '../store/modules/project'
 
 export default Vue.extend({
   name: 'ContainerVueComponent',
@@ -36,12 +39,20 @@ export default Vue.extend({
   },
 
   computed: {
+    ...projectHelpers.mapState({
+      scopes: 'documentScopes'
+    }),
+
     ...projectHelpers.mapGetters({
       documents: 'scopedDocuments'
     }),
 
     document(): ScopedDocument | undefined {
       return this.documents[this.uri]
+    },
+
+    scope(): DocumentScope | undefined {
+      return this.scopes[this.uri]
     }
   }
 })
diff --git a/src/view/components/InputJson.vue b/src/view/components/InputJson.vue
new file mode 100644
index 0000000..dac650f
--- /dev/null
+++ b/src/view/components/InputJson.vue
@@ -0,0 +1,54 @@
+<template>
+  <input class="input-json" type="text" :value="jsonValue" @change="onChange">
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'InputJson',
+
+  props: {
+    value: [Number, String, Boolean, Object, Array]
+  },
+
+  computed: {
+    jsonValue(): string {
+      try {
+        return this.value === undefined
+          ? 'undefined'
+          : JSON.stringify(this.value)
+      } catch (e) {
+        return 'undefined'
+      }
+    }
+  },
+
+  methods: {
+    onChange(event: Event) {
+      const input = event.target as HTMLInputElement
+      const jsonValue = input.value
+
+      try {
+        const value =
+          jsonValue === 'undefined' ? undefined : JSON.parse(jsonValue)
+
+        this.$emit('change', value)
+      } catch (e) {
+        input.value = this.jsonValue
+        this.$emit('error', jsonValue)
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.input-json {
+  padding: 0;
+  border-width: 0;
+  background: none;
+  font-size: inherit;
+  font-family: inherit;
+}
+</style>
diff --git a/src/view/components/PageMain.vue b/src/view/components/PageMain.vue
index 35d7975..b1fdc28 100644
--- a/src/view/components/PageMain.vue
+++ b/src/view/components/PageMain.vue
@@ -5,6 +5,7 @@
         <Renderer
           v-if="renderingDocument"
           :document="renderingDocument"
+          :scope="scope"
           :selected-path="selectedPath"
           :width="width"
           :height="height"
@@ -48,7 +49,11 @@
         </div>
 
         <div class="information-pane-item">
-          <ScopeInformation :props="document.props" :data="document.data">
+          <ScopeInformation
+            :scope="scope"
+            @update-prop="updatePropValue"
+            @update-data="updateDataValue"
+          >
             <p class="not-found" slot="not-found-prop">Not found</p>
             <p class="not-found" slot="not-found-data">Not found</p>
           </ScopeInformation>
@@ -112,6 +117,7 @@ export default Vue.extend({
 
     ...projectHelpers.mapGetters({
       document: 'currentDocument',
+      scope: 'currentScope',
       renderingDocument: 'currentRenderingDocument',
       scopedDocuments: 'scopedDocuments'
     }),
@@ -135,6 +141,8 @@ export default Vue.extend({
       'updateDeclaration'
     ]),
 
+    ...projectHelpers.mapMutations(['updatePropValue', 'updateDataValue']),
+
     ...viewportHelpers.mapActions(['resize', 'zoom']),
 
     onStartDragging(uri: string): void {
diff --git a/src/view/components/Renderer.vue b/src/view/components/Renderer.vue
index aad2c3d..52f950e 100644
--- a/src/view/components/Renderer.vue
+++ b/src/view/components/Renderer.vue
@@ -12,8 +12,7 @@
         <VueComponent
           :uri="document.uri"
           :template="document.template"
-          :props="document.props"
-          :data="document.data"
+          :scope="scope"
           :child-components="document.childComponents"
           :styles="document.styleCode"
           @select="onSelectNode"
@@ -35,7 +34,7 @@
 import Vue from 'vue'
 import Viewport from './Viewport.vue'
 import VueComponent from './VueComponent.vue'
-import { ScopedDocument } from '../store/modules/project'
+import { ScopedDocument, DocumentScope } from '../store/modules/project'
 import { Element } from '@/parser/template/types'
 
 const scrollContentPadding = 100
@@ -53,6 +52,10 @@ export default Vue.extend({
       type: Object as () => ScopedDocument,
       required: true
     },
+    scope: {
+      type: Object as () => DocumentScope,
+      required: true
+    },
     selectedPath: {
       type: Array as () => number[],
       required: true
diff --git a/src/view/components/ScopeInformation.vue b/src/view/components/ScopeInformation.vue
index c3dd622..5dd5ef2 100644
--- a/src/view/components/ScopeInformation.vue
+++ b/src/view/components/ScopeInformation.vue
@@ -2,14 +2,14 @@
   <div class="information">
     <section class="information-group">
       <h2 class="information-title">Props</h2>
-      <ul v-if="props.length > 0" class="information-list">
-        <li v-for="prop in props" :key="prop.name" class="information-list-item">
-          <strong class="information-label">{{ prop.name }}</strong>
+      <ul v-if="hasProps" class="information-list">
+        <li v-for="(prop, name) in scope.props" :key="name" class="information-list-item">
+          <strong class="information-label">{{ name }}</strong>
           <span class="information-text">
-            <span v-if="prop.default === undefined" class="information-placeholder">
-              {{ prop.type }}
-            </span>
-            <span v-else>{{ prop.default }}</span>
+            <InputJson
+              :value="prop.value"
+              @change="updateProp(name, arguments[0])"
+            />
           </span>
         </li>
       </ul>
@@ -20,11 +20,14 @@
 
     <section class="information-group">
       <h2 class="information-title">Data</h2>
-      <ul v-if="data.length > 0" class="information-list">
-        <li v-for="d in data" :key="d.name" class="information-list-item">
-          <strong class="information-label">{{ d.name }}</strong>
+      <ul v-if="hasData" class="information-list">
+        <li v-for="(d, name) in scope.data" :key="name" class="information-list-item">
+          <strong class="information-label">{{ name }}</strong>
           <span class="information-text">
-            {{ d.default }}
+            <InputJson
+              :value="d.value"
+              @change="updateData(name, arguments[0])"
+            />
           </span>
         </li>
       </ul>
@@ -37,19 +40,46 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { Prop, Data } from '@/parser/script/types'
+import InputJson from './InputJson.vue'
+import { DocumentScope } from '@/view/store/modules/project'
 
 export default Vue.extend({
-  name: 'Information',
+  name: 'ScopeInformation',
+
+  components: {
+    InputJson
+  },
 
   props: {
-    props: {
-      type: Array as { (): Prop[] },
+    scope: {
+      type: Object as () => DocumentScope,
       required: true
+    }
+  },
+
+  computed: {
+    hasProps(): boolean {
+      return Object.keys(this.scope.props).length > 0
     },
-    data: {
-      type: Array as { (): Data[] },
-      required: true
+
+    hasData(): boolean {
+      return Object.keys(this.scope.data).length > 0
+    }
+  },
+
+  methods: {
+    updateProp(name: string, value: any): void {
+      this.$emit('update-prop', {
+        name,
+        value
+      })
+    },
+
+    updateData(name: string, value: any): void {
+      this.$emit('update-data', {
+        name,
+        value
+      })
     }
   }
 })
@@ -93,10 +123,6 @@ export default Vue.extend({
   content: ':';
 }
 
-.information-placeholder {
-  color: #888;
-}
-
 .information-text {
   margin-left: 0.5em;
 }
diff --git a/src/view/components/VueComponent.vue b/src/view/components/VueComponent.vue
index 87d1ac3..d05e7c9 100644
--- a/src/view/components/VueComponent.vue
+++ b/src/view/components/VueComponent.vue
@@ -2,7 +2,8 @@
 import Vue, { VNode } from 'vue'
 import Child from './Child.vue'
 import { Template } from '@/parser/template/types'
-import { Prop, Data, ChildComponent } from '@/parser/script/types'
+import { ChildComponent } from '@/parser/script/types'
+import { DocumentScope } from '@/view/store/modules/project'
 import { resolveControlDirectives, ResolvedChild } from '../rendering'
 
 export default Vue.extend({
@@ -18,12 +19,8 @@ export default Vue.extend({
       type: String,
       required: true
     },
-    props: {
-      type: Array as { (): Prop[] },
-      required: true
-    },
-    data: {
-      type: Array as { (): Data[] },
+    scope: {
+      type: Object as { (): DocumentScope },
       required: true
     },
     childComponents: {
@@ -37,18 +34,21 @@ export default Vue.extend({
   },
 
   computed: {
-    scope(): Record<string, any> {
-      const scope: Record<string, any> = {}
+    scopeValues(): Record<string, any> {
+      const values: Record<string, any> = {}
 
-      this.props.forEach(({ name, default: value }) => {
-        scope[name] = name in this.propsData ? this.propsData[name] : value
+      Object.keys(this.scope.props).forEach(name => {
+        values[name] =
+          name in this.propsData
+            ? this.propsData[name]
+            : this.scope.props[name].value
       })
 
-      this.data.forEach(({ name, default: value }) => {
-        scope[name] = value
+      Object.keys(this.scope.data).forEach(name => {
+        values[name] = this.scope.data[name].value
       })
 
-      return scope
+      return values
     }
   },
 
@@ -58,7 +58,10 @@ export default Vue.extend({
     if (this.template) {
       this.template.children
         .reduce<ResolvedChild[]>((acc, child) => {
-          return resolveControlDirectives(acc, { el: child, scope: this.scope })
+          return resolveControlDirectives(acc, {
+            el: child,
+            scope: this.scopeValues
+          })
         }, [])
         .forEach(child => {
           return children.push(
diff --git a/src/view/store/modules/project.ts b/src/view/store/modules/project.ts
index 10edf51..6af782d 100644
--- a/src/view/store/modules/project.ts
+++ b/src/view/store/modules/project.ts
@@ -1,4 +1,5 @@
 import assert from 'assert'
+import Vue from 'vue'
 import { DefineModule, createNamespacedHelpers } from 'vuex'
 import { VueFilePayload } from '@/parser/vue-file'
 import { Template, Element } from '@/parser/template/types'
@@ -26,10 +27,21 @@ export interface ScopedDocument {
   styleCode: string
 }
 
+interface DocumentScopeItem {
+  type: string | null
+  value: any
+}
+
+export interface DocumentScope {
+  props: Record<string, DocumentScopeItem>
+  data: Record<string, DocumentScopeItem>
+}
+
 export type DraggingPlace = 'before' | 'after' | 'first' | 'last'
 
 export interface ProjectState {
   documents: Record<string, VueFilePayload>
+  documentScopes: Record<string, DocumentScope>
   currentUri: string | undefined
   draggingUri: string | undefined
   selectedPath: number[]
@@ -40,6 +52,7 @@ export interface ProjectState {
 interface ProjectGetters {
   scopedDocuments: Record<string, ScopedDocument>
   currentDocument: VueFilePayload | undefined
+  currentScope: DocumentScope | undefined
   currentRenderingDocument: ScopedDocument | undefined
   draggingScopedDocument: ScopedDocument | undefined
   localNameOfDragging: string | undefined
@@ -79,6 +92,22 @@ interface ProjectMutations {
   setDraggingUri: string | undefined
   setDraggingPath: number[]
   setMatchedRules: RuleForPrint[]
+
+  // TODO: add removeScope mutation after splitting
+  // document update notification into more grained
+  refreshScope: {
+    uri: string
+    props: Prop[]
+    data: Data[]
+  }
+  updatePropValue: {
+    name: string
+    value: any
+  }
+  updateDataValue: {
+    name: string
+    value: any
+  }
 }
 
 export const projectHelpers = createNamespacedHelpers<
@@ -103,6 +132,7 @@ export const project: DefineModule<
 
   state: () => ({
     documents: {},
+    documentScopes: {},
     currentUri: undefined,
     draggingUri: undefined,
     selectedPath: [],
@@ -140,6 +170,13 @@ export const project: DefineModule<
       return state.documents[state.currentUri]
     },
 
+    currentScope(state) {
+      if (!state.currentUri) {
+        return undefined
+      }
+      return state.documentScopes[state.currentUri]
+    },
+
     currentRenderingDocument(state, getters) {
       if (!state.currentUri) {
         return undefined
@@ -234,6 +271,12 @@ export const project: DefineModule<
             Object.keys(data.vueFiles).forEach(key => {
               const file = data.vueFiles[key]
               styleMatcher.register(file.uri, file.styles)
+
+              commit('refreshScope', {
+                uri: key,
+                props: file.props,
+                data: file.data
+              })
             })
             dispatch('matchSelectedNodeWithStyles', undefined)
             break
@@ -476,6 +519,73 @@ export const project: DefineModule<
 
     setMatchedRules(state, rules) {
       state.matchedRules = rules
+    },
+
+    // TODO: move this logic to server side
+    refreshScope(state, { uri, props, data }) {
+      function update(
+        scope: Record<string, DocumentScopeItem>,
+        next: (Prop | Data)[]
+      ): void {
+        const willRemove = Object.keys(scope)
+
+        next.forEach(item => {
+          if (!scope[item.name]) {
+            Vue.set(scope, item.name, {
+              type: null,
+              value: item.default
+            })
+          }
+
+          scope[item.name].type = 'type' in item ? item.type : null
+
+          const index = willRemove.indexOf(item.name)
+          if (index >= 0) {
+            willRemove.splice(index, 1)
+          }
+        })
+
+        willRemove.forEach(key => {
+          Vue.delete(scope, key)
+        })
+      }
+
+      let scope = state.documentScopes[uri]
+      if (!scope) {
+        scope = Vue.set(state.documentScopes, uri, {
+          props: {},
+          data: {}
+        })
+      }
+
+      update(scope.props, props)
+      update(scope.data, data)
+    },
+
+    updatePropValue(state, { name, value }) {
+      const uri = state.currentUri
+      if (!uri) return
+
+      const scope = state.documentScopes[uri]
+      if (!scope) return
+
+      const target = scope.props[name]
+      if (!target) return
+
+      target.value = value
+    },
+
+    updateDataValue(state, { name, value }) {
+      const uri = state.currentUri
+      if (!uri) return
+
+      const scope = state.documentScopes[uri]
+      if (!scope) return
+
+      const target = scope.data[name]
+      if (!target) return
+
+      target.value = value
     }
   }
 }
diff --git a/test/helpers/template.ts b/test/helpers/template.ts
index 206bca2..5a0d356 100644
--- a/test/helpers/template.ts
+++ b/test/helpers/template.ts
@@ -28,6 +28,11 @@ export function render(
   })
 
   store.commit('project/changeDocument', 'file:///Test.vue')
+  store.commit('project/refreshScope', {
+    uri: 'file:///Test.vue',
+    props,
+    data
+  })
 
   store.commit(
     'project/setDocuments',
@@ -44,12 +49,20 @@ export function render(
     })
   )
 
+  Object.keys(storeDocuments).forEach(uri => {
+    const doc = storeDocuments[uri]
+    store.commit('project/refreshScope', {
+      uri,
+      props: doc.props || [],
+      data: doc.data || []
+    })
+  })
+
   return mount(VueComponent, {
     propsData: {
       uri: 'file:///Test.vue',
       template,
-      props,
-      data,
+      scope: store.getters['project/currentScope'],
       childComponents,
       styles: ''
     },
diff --git a/test/view/Renderer.spec.ts b/test/view/Renderer.spec.ts
index 71f2c8b..9e8ff46 100644
--- a/test/view/Renderer.spec.ts
+++ b/test/view/Renderer.spec.ts
@@ -5,6 +5,11 @@ describe('Renderer', () => {
   let mockWidth = 1000
   let mockHeight = 1000
 
+  const emptyScope = {
+    props: {},
+    data: {}
+  }
+
   function mockGetBoundingClientRect() {
     return {
       x: 0,
@@ -35,6 +40,7 @@ describe('Renderer', () => {
     const wrapper = shallow<any>(Renderer, {
       propsData: {
         document: {},
+        scope: emptyScope,
         selectedPath: [],
         width: 800,
         height: 600,
@@ -51,6 +57,7 @@ describe('Renderer', () => {
     const wrapper = shallow<any>(Renderer, {
       propsData: {
         document: {},
+        scope: emptyScope,
         selectedPath: [],
         width: 800,
         height: 1200,
@@ -67,6 +74,7 @@ describe('Renderer', () => {
     const wrapper = shallow<any>(Renderer, {
       propsData: {
         document: {},
+        scope: emptyScope,
         selectedPath: [],
         width: 500,
         height: 500,
@@ -83,6 +91,7 @@ describe('Renderer', () => {
     const wrapper = shallow<any>(Renderer, {
       propsData: {
         document: {},
+        scope: emptyScope,
         selectedPath: [],
         width: 800,
         height: 600,
@@ -113,6 +122,7 @@ describe('Renderer', () => {
     const wrapper = shallow<any>(Renderer, {
       propsData: {
         document: {},
+        scope: emptyScope,
         selectedPath: [],
         width: 800,
         height: 600,
diff --git a/test/view/store/project.spec.ts b/test/view/store/project.spec.ts
index e554257..be85382 100644
--- a/test/view/store/project.spec.ts
+++ b/test/view/store/project.spec.ts
@@ -313,6 +313,221 @@ describe('Store project actions', () => {
   })
 })
 
+describe('Store project mutations', () => {
+  describe('refreshScope', () => {
+    const { refreshScope } = project.mutations!
+
+    it('adds missing scope', () => {
+      const state: any = {
+        documentScopes: {}
+      }
+
+      refreshScope(state, {
+        uri: 'file:///Foo.vue',
+        props: [],
+        data: []
+      })
+
+      expect(state.documentScopes).toEqual({
+        'file:///Foo.vue': {
+          props: {},
+          data: {}
+        }
+      })
+    })
+
+    it('adds missing properties', () => {
+      const state: any = {
+        documentScopes: {
+          'file:///Foo.vue': {
+            props: {
+              test: {
+                type: 'String',
+                value: 'test'
+              }
+            },
+            data: {
+              test2: {
+                type: null,
+                value: 'test2'
+              }
+            }
+          }
+        }
+      }
+
+      refreshScope(state, {
+        uri: 'file:///Foo.vue',
+        props: [
+          {
+            name: 'test',
+            type: 'String',
+            default: undefined
+          },
+          {
+            name: 'additionalProp',
+            type: 'Number',
+            default: 10
+          }
+        ],
+        data: [
+          {
+            name: 'test2',
+            default: 'initial'
+          },
+          {
+            name: 'additionalData',
+            default: true
+          }
+        ]
+      })
+
+      expect(state.documentScopes).toEqual({
+        'file:///Foo.vue': {
+          props: {
+            test: {
+              type: 'String',
+              value: 'test'
+            },
+            additionalProp: {
+              type: 'Number',
+              value: 10
+            }
+          },
+          data: {
+            test2: {
+              type: null,
+              value: 'test2'
+            },
+            additionalData: {
+              type: null,
+              value: true
+            }
+          }
+        }
+      })
+    })
+
+    it('removes no longer undeclared properties', () => {
+      const state: any = {
+        documentScopes: {
+          'file:///Foo.vue': {
+            props: {
+              test: {
+                type: 'String',
+                value: 'test'
+              },
+              additionalProp: {
+                type: 'Number',
+                value: 10
+              }
+            },
+            data: {
+              test2: {
+                type: null,
+                value: 'test2'
+              },
+              additionalData: {
+                type: null,
+                value: true
+              }
+            }
+          }
+        }
+      }
+
+      refreshScope(state, {
+        uri: 'file:///Foo.vue',
+        props: [
+          {
+            name: 'additionalProp',
+            type: 'Number',
+            default: 10
+          }
+        ],
+        data: [
+          {
+            name: 'additionalData',
+            default: true
+          }
+        ]
+      })
+
+      expect(state.documentScopes).toEqual({
+        'file:///Foo.vue': {
+          props: {
+            additionalProp: {
+              type: 'Number',
+              value: 10
+            }
+          },
+          data: {
+            additionalData: {
+              type: null,
+              value: true
+            }
+          }
+        }
+      })
+    })
+
+    it('does nothing if there are no diffs', () => {
+      const state: any = {
+        documentScopes: {
+          'file:///Foo.vue': {
+            props: {
+              test: {
+                type: 'String',
+                value: 'test'
+              }
+            },
+            data: {
+              test2: {
+                type: null,
+                value: 'test2'
+              }
+            }
+          }
+        }
+      }
+
+      refreshScope(state, {
+        uri: 'file:///Foo.vue',
+        props: [
+          {
+            name: 'test',
+            type: 'String',
+            default: undefined
+          }
+        ],
+        data: [
+          {
+            name: 'test2',
+            default: 'initial'
+          }
+        ]
+      })
+
+      expect(state.documentScopes).toEqual({
+        'file:///Foo.vue': {
+          props: {
+            test: {
+              type: 'String',
+              value: 'test'
+            }
+          },
+          data: {
+            test2: {
+              type: null,
+              value: 'test2'
+            }
+          }
+        }
+      })
+    })
+  })
+})
+
 function documents() {
   return {
     'file:///Foo.vue': {