fix(ui): improved performance

Author: Guillaume Chau

packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue

@@ -118,6 +118,8 @@ import { size } from '../filters'
 import DonutModule from './DonutModule.vue'
 
 export default {
+  clientState: true,
+
   mixins: [
     Dashboard
   ],

packages/@vue/cli-ui/src/components/ConnectionStatus.vue

@@ -24,6 +24,12 @@
   </ApolloQuery>
 </template>
 
+<script>
+export default {
+  clientState: true
+}
+</script>
+
 <style lang="stylus" scoped>
 @import "~@/style/imports"
 

packages/@vue/cli-ui/src/components/StatusBar.vue

@@ -83,6 +83,8 @@ import DARK_MODE_SET from '../graphql/darkModeSet.gql'
 let lastRoute
 
 export default {
+  clientState: true,
+
   data () {
     return {
       showLogs: false,

packages/@vue/cli-ui/src/components/TerminalView.vue

@@ -73,6 +73,8 @@ const darkTheme = {
 }
 
 export default {
+  clientState: true,
+
   props: {
     cols: {
       type: Number,
@@ -136,21 +138,12 @@ export default {
 
     content: 'setContent',
 
-    theme: {
-      handler (value) {
-        if (this.$_terminal) {
-          this.$_terminal._setTheme(this.theme)
-        }
-      },
-      immediate: true
-    }
-  },
-
-  mounted () {
-    this.initTerminal()
-
-    if (this.autoSize) {
-      this.$nextTick(this.fit)
+    darkMode (value, oldValue) {
+      if (typeof oldValue === 'undefined') {
+        this.initTerminal()
+      } else if (this.$_terminal) {
+        this.$_terminal._setTheme(this.theme)
+      }
     }
   },
 
@@ -171,6 +164,10 @@ export default {
 
       term.on('blur', () => this.$emit('blur'))
       term.on('focus', () => this.$emit('focus'))
+
+      if (this.autoSize) {
+        this.$nextTick(this.fit)
+      }
     },
 
     setContent (value, ln = true) {

packages/@vue/cli-ui/src/mixins/ClientState.js

@@ -3,9 +3,24 @@ import DARK_MODE from '../graphql/darkMode.gql'
 
 // @vue/component
 export default {
-  apollo: {
-    // In plugins, user `this.$root.connected` for example
-    connected: CONNECTED,
-    darkMode: DARK_MODE
+  beforeCreate () {
+    if (this.$options.clientState) {
+      const newData = {
+        connected: CONNECTED,
+        darkMode: DARK_MODE
+      }
+      this.$options.apollo = {
+        ...this.$options.apollo,
+        ...newData
+      }
+      // Proxy prop on `this`
+      for (const key in newData) {
+        Object.defineProperty(this, key, {
+          get: () => this.$data.$apolloData.data[key],
+          enumerable: true,
+          configurable: true
+        })
+      }
+    }
   }
 }