feat(ui): webpack dashboard 'open app' button

Author: Guillaume Chau

docs/plugin-dev-ui.md

@@ -70,6 +70,8 @@ module.exports = api => {
 }
 ```
 
+**⚠️ The files will be reloaded when feetching the plugin list in the 'Project plugins' view. To apply changes, click on the 'Project plugins' button in the navigation sidebar on the left.**
+
 ### Project configurations
 
 ![Configuration ui](./config-ui.png)
@@ -466,9 +468,14 @@ In the plugin `ui.js`:
 // Set or update
 api.setSharedData('my-variable', 'some-data')
 // Get
-api.getSharedData('my-variable')
+const sharedData = api.getSharedData('my-variable')
+if (sharedData) {
+  console.log(sharedData.value)
+}
+// Remove
+api.removeSharedData('my-variable')
 // Namespaced versions
-const { setSharedData, getSharedData } = api.namespace('webpack-dashboard-')
+const { setSharedData, getSharedData, removeSharedData } = api.namespace('webpack-dashboard-')
 ```
 
 In the custom component:

packages/@vue/cli-service/lib/commands/serve.js

@@ -2,7 +2,8 @@ const {
   info,
   error,
   hasYarn,
-  openBrowser
+  openBrowser,
+  IpcMessenger
 } = require('@vue/cli-shared-utils')
 
 const defaults = {
@@ -121,6 +122,17 @@ module.exports = (api, options) => {
             openBrowser(urls.localUrlForBrowser)
           }
 
+          if (args.dashboard) {
+            const ipc = new IpcMessenger()
+            ipc.connect()
+            ipc.send({
+              vueServe: {
+                url: urls.localUrlForBrowser
+              }
+            })
+            ipc.disconnect()
+          }
+
           // resolve returned Promise
           // so other commands can do api.service.run('serve').then(...)
           resolve({

packages/@vue/cli-service/ui.js

@@ -1,7 +1,8 @@
 /* eslint-disable vue-libs/no-async-functions */
+const { openBrowser } = require('@vue/cli-shared-utils')
 
 module.exports = api => {
-  const { setSharedData, getSharedData } = api.namespace('webpack-dashboard-')
+  const { setSharedData, getSharedData, removeSharedData, onAction } = api.namespace('webpack-dashboard-')
 
   function resetSharedData (key) {
     setSharedData(`${key}-status`, null)
@@ -90,12 +91,14 @@ module.exports = api => {
 
       // Data
       resetSharedData('serve')
+      removeSharedData('serve-url')
     },
     onRun: () => {
       api.ipcOn(onWebpackMessage)
     },
     onExit: () => {
       api.ipcOff(onWebpackMessage)
+      removeSharedData('serve-url')
     },
     views: [
       {
@@ -202,4 +205,15 @@ module.exports = api => {
     id: 'vue-webpack',
     path: '@vue/cli-ui-addon-webpack/dist'
   })
+
+  api.ipcOn(({ data }) => {
+    if (data.vueServe) {
+      setSharedData('serve-url', data.vueServe.url)
+    }
+  })
+
+  onAction('open-app', () => {
+    const url = getSharedData('serve-url')
+    url && openBrowser(url.value)
+  })
 }

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

@@ -3,6 +3,21 @@
     <div class="pane-toolbar">
       <VueIcon icon="dashboard"/>
       <div class="title">Dashboard</div>
+
+      <template
+        v-if="mode === 'serve'"
+      >
+        <VueButton
+          icon-left="open_in_browser"
+          label="Open app"
+          :disabled="!serveUrl"
+          @click="$callPluginAction('webpack-dashboard-open-app')"
+        />
+        <VueIcon
+          icon="lens"
+          class="separator"
+        />
+      </template>
       <VueSwitch
         v-model="useGzip"
       >
@@ -50,6 +65,18 @@ export default {
     'TaskDetails'
   ],
 
+  data () {
+    return {
+      mode: null
+    }
+  },
+
+  sharedData () {
+    return {
+      serveUrl: `webpack-dashboard-serve-url`
+    }
+  },
+
   computed: {
     useGzip: {
       get () { return this.$store.getters.useGzip },
@@ -58,7 +85,7 @@ export default {
   },
 
   created () {
-    const mode = this.TaskDetails.task.command.indexOf('vue-cli-service serve') !== -1 ? 'serve' : 'build'
+    const mode = this.mode = this.TaskDetails.task.command.indexOf('vue-cli-service serve') !== -1 ? 'serve' : 'build'
     this.$store.commit('mode', mode)
     this.$watchSharedData(`webpack-dashboard-${mode}-stats`, value => {
       this.$store.commit('stats', {

packages/@vue/cli-ui/src/graphql-api/api/PluginApi.js

@@ -211,6 +211,15 @@ class PluginApi {
     sharedData.set({ id, value }, this.context)
   }
 
+  /**
+   * Delete a shared data.
+   *
+   * @param {string} id Id of the Shared data
+   */
+  removeSharedData (id) {
+    sharedData.remove(id, this.context)
+  }
+
   /**
    * Listener triggered when a Plugin action is called from a client addon component.
    *
@@ -252,6 +261,7 @@ class PluginApi {
     return {
       getSharedData: (id) => this.getSharedData(namespace + id),
       setSharedData: (id, value) => this.setSharedData(namespace + id, value),
+      removeSharedData: (id) => this.removeSharedData(namespace + id),
       onAction: (id, cb) => this.onAction(namespace + id, cb),
       callAction: (id, params) => this.callAction(namespace + id, params)
     }

packages/@vue/cli-ui/src/graphql-api/connectors/shared-data.js

@@ -22,7 +22,15 @@ function set ({ id, value }, context) {
   return { id, value }
 }
 
+function remove (id, context) {
+  sharedData.delete(id)
+  context.pubsub.publish(channels.SHARED_DATA_UPDATED, {
+    sharedDataUpdated: { id, value: undefined }
+  })
+}
+
 module.exports = {
   get,
-  set
+  set,
+  remove
 }

packages/@vue/cli-ui/src/style/main.styl

@@ -123,7 +123,12 @@ ansi-colors('white', $vue-ui-color-light)
     width 0
     ellipsis()
 
+  > .vue-ui-switch,
+  > .vue-ui-button:not(.icon-button)
+    padding 0 8px
+
   > .vue-ui-switch
+    font-size 14px
     &:not(.selected)
       .wrapper
         background rgba($vue-ui-color-dark, .2)