feat(ui): serve static files in plugin ui-public folders + support custom icons in routes

Author: Guillaume Chau

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

@@ -11,11 +11,17 @@
       <VueGroupButton
         class="flat big icon-button"
         :value="route.name"
-        :icon-left="route.icon"
-      />
+        :icon-left="!imageIcon && route.icon"
+      >
+        <img
+          v-if="imageIcon"
+          :src="route.icon"
+          class="image-icon"
+        >
+      </VueGroupButton>
 
       <template slot="popover">
-        <div class="title">{{ $t(route.tooltip) }}</div>
+        <div class="title">{{ $t(route.tooltip) }}</div>
 
         <div v-if="badges" class="badges">
           <RouteBadge
@@ -55,6 +61,10 @@ export default {
 
     firstNotHiddenBadge () {
       return this.badges && this.badges.find(b => !b.hidden)
+    },
+
+    imageIcon () {
+      return this.route.icon && this.route.icon.indexOf('.') !== -1
     }
   }
 }
@@ -101,6 +111,16 @@ $bg = darken($vue-ui-color-dark, 70%)
     .bullet
       border-color darken($bg, 8%)
 
+  .icon-button
+    padding-left 0
+    padding-right @padding-left
+    h-box()
+    box-center()
+
+  .image-icon
+    max-width 24px
+    max-height @width
+
 .badges
   margin ($padding-item/2) 0
   display grid

packages/@vue/cli-ui/src/graphql-api/connectors/client-addons.js

@@ -1,6 +1,8 @@
 const path = require('path')
 // Subs
 const channels = require('../channels')
+// Utils
+const { getBasePath } = require('../utils/serve')
 
 let addons = []
 
@@ -37,14 +39,6 @@ function getUrl (addon, context) {
   return addon.url || `${baseUrl}/_addon/${addon.id}/index.js`
 }
 
-function getBasePath (filePath) {
-  const index = filePath.lastIndexOf('/index.js')
-  if (index !== -1) {
-    return filePath.substr(0, index)
-  }
-  return filePath
-}
-
 function serve (req, res) {
   const { id, 0: file } = req.params
   const addon = findOne(id)

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

@@ -31,6 +31,7 @@ const routes = require('./routes')
 const PluginApi = require('../api/PluginApi')
 // Utils
 const { getCommand } = require('../utils/command')
+const { getBasePath } = require('../utils/serve')
 
 const PROGRESS_ID = 'plugin-installation'
 
@@ -344,6 +345,18 @@ async function callAction ({ id, params }, context) {
   return { id, params, results, errors }
 }
 
+function serve (req, res) {
+  const { id, 0: file } = req.params
+  const basePath = getBasePath(require.resolve(id), id)
+  if (basePath) {
+    res.sendFile(path.join(basePath, 'ui-public', file))
+    return
+  }
+
+  res.status(404)
+  res.send(`Addon ${id} not found in loaded addons. Try opening a vue-cli project first?`)
+}
+
 module.exports = {
   list,
   findOne,
@@ -358,5 +371,6 @@ module.exports = {
   resetPluginApi,
   getApi,
   finishInstall,
-  callAction
+  callAction,
+  serve
 }

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

@@ -1,13 +1,15 @@
 const path = require('path')
 const express = require('express')
 const fallback = require('express-history-api-fallback')
-
+// Connectors
 const clientAddons = require('./connectors/client-addons')
+const plugins = require('./connectors/plugins')
 
 const distPath = path.resolve(__dirname, '../../dist')
 
 module.exports = app => {
   app.use(express.static(distPath))
+  app.use('/_plugin/:id/*', plugins.serve)
   app.use('/_addon/:id/*', clientAddons.serve)
   app.use(fallback(path.join(distPath, 'index.html')))
 }

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

@@ -0,0 +1,15 @@
+exports.getBasePath = function (filePath, id = null) {
+  {
+    const index = filePath.lastIndexOf('/index.js')
+    if (index !== -1) {
+      filePath = filePath.substr(0, index)
+    }
+  }
+  if (id) {
+    const index = filePath.lastIndexOf(id)
+    if (index !== -1) {
+      filePath = filePath.substr(0, index + id.length)
+    }
+  }
+  return filePath
+}