feat(ui): vue ui command

packages/@vue/cli-service-global/package.json

@@ -25,6 +25,8 @@
     "@vue/cli-plugin-babel": "^3.0.0-beta.6",
     "@vue/cli-plugin-eslint": "^3.0.0-beta.6",
     "@vue/cli-service": "^3.0.0-beta.6",
+    "@vue/cli-ui": "^3.0.0-beta.6",
+    "@vue/cli-ui-addon-webpack": "^3.0.0-beta.6",
     "chalk": "^2.3.2",
     "eslint-plugin-vue": "^4.3.0",
     "resolve": "^1.5.0",

packages/@vue/cli-service/lib/Service.js

@@ -91,6 +91,7 @@ module.exports = class Service {
       './commands/build',
       './commands/inspect',
       './commands/help',
+      './commands/ui',
       // config plugins are order sensitive
       './config/base',
       './config/css',

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

@@ -0,0 +1,22 @@
+module.exports = api => {
+  api.registerCommand('ui', args => {
+    api.setMode('production')
+
+    let server = require('vue-cli-plugin-apollo/graphql-server')
+    server = server.default || server
+
+    const opts = {
+      mock: false,
+      apolloEngine: false,
+      timeout: 0,
+      paths: {
+        typeDefs: require.resolve('@vue/cli-ui/src/graphql-api/type-defs.js'),
+        resolvers: require.resolve('@vue/cli-ui/src/graphql-api/resolvers.js'),
+        context: require.resolve('@vue/cli-ui/src/graphql-api/context.js'),
+        server: require.resolve('@vue/cli-ui/src/graphql-api/server.js')
+      }
+    }
+
+    server(opts)
+  })
+}

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

@@ -202,6 +202,6 @@ module.exports = api => {
   // Testing client addon
   api.addClientAddon({
     id: 'vue-webpack',
-    url: 'http://localhost:8081/app.js'
+    path: '@vue/cli-ui-addon-webpack/dist'
   })
 }

packages/@vue/cli-ui-addon-build/package.json → packages/@vue/cli-ui-addon-webpack/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "cli-ui-addon-build",
-  "version": "0.1.0",
+  "name": "@vue/cli-ui-addon-webpack",
+  "version": "3.0.0-beta.6",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

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

@@ -17,6 +17,12 @@
       <AssetList />
       <ModuleList />
     </div>
+
+    <div class="logo">
+      <a href="https://webpack.js.org/" target="_blank">
+        <img src="../assets/webpack.svg" class="webpack-logo">
+      </a>
+    </div>
   </div>
 </template>
 
@@ -114,4 +120,12 @@ export default {
 
   .pane-toolbar
     margin-bottom $padding-item
+
+  .logo
+    margin $padding-item 0
+    v-box()
+    box-center()
+    .webpack-logo
+      width 32px
+      height @width
 </style>

packages/@vue/cli-ui-addon-webpack/vue.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  baseUrl: '/_addon/vue-webpack',
+  configureWebpack: {
+    output: {
+      // Important
+      filename: 'index.js'
+    }
+  },
+  css: {
+    extract: false
+  },
+  chainWebpack: config => {
+    config.plugins.delete('preload')
+    config.plugins.delete('prefetch')
+    config.plugins.delete('html')
+    config.plugins.delete('split-vendor')
+    config.plugins.delete('split-vendor-async')
+    config.plugins.delete('split-manifest')
+  },
+  devServer: {
+    headers: {
+      'Access-Control-Allow-Origin': '*'
+    }
+  }
+}

packages/@vue/cli-ui/.env.production

@@ -0,0 +1 @@
+VUE_APP_GRAPHQL_ENDPOINT=

packages/@vue/cli-ui/package.json

@@ -12,7 +12,7 @@
     "prod-graphql-api": "cross-env NODE_ENV=production vue-cli-service run-graphql-api"
   },
   "dependencies": {
-    "@vue/ui": "^0.2.2",
+    "@vue/ui": "^0.2.4",
     "ansi_up": "^2.0.2",
     "apollo-cache-inmemory": "^1.1.10",
     "apollo-client": "^2.2.6",
@@ -22,6 +22,7 @@
     "apollo-link-ws": "^1.0.0",
     "apollo-utilities": "^1.0.9",
     "clone": "^1.0.4",
+    "express-history-api-fallback": "^2.2.1",
     "file-icons-js": "^1.0.3",
     "graphql": "^0.13.0",
     "graphql-type-json": "^0.2.0",
@@ -53,7 +54,7 @@
     "lint-staged": "^6.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
-    "vue-cli-plugin-apollo": "^0.7.4",
+    "vue-cli-plugin-apollo": "^0.7.7",
     "vue-template-compiler": "^2.5.17-beta.0"
   },
   "browserslist": [

packages/@vue/cli-ui/src/apollo.js

@@ -26,7 +26,7 @@ export default function createApolloClient ({ base, endpoints, persisting }) {
   const stateLink = withClientState({ defaults, cache, resolvers })
 
   // Web socket
-  wsClient = new SubscriptionClient(base.replace(/^https?/i, 'ws' + (process.env.NODE_ENV === 'production' ? 's' : '')) +
+  wsClient = new SubscriptionClient(base.replace(/^https?/i, 'ws') +
   endpoints.subscription, {
     reconnect: true
   })

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

@@ -60,9 +60,9 @@ export default {
 
   .content
     grid-area content
-    background darken($color-background-light, 3%)
+    background $color-background-light
     .wrapper
-      background $color-background-light
+      background $md-white
       position relative
       overflow-x hidden
       overflow-y auto

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

@@ -51,5 +51,5 @@ export default {
 .nav-list
   overflow-x none
   overflow-y auto
-  background darken($color-background-light, 2%)
+  background $color-background-light
 </style>

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

@@ -72,7 +72,7 @@ export default {
       margin 0 auto
 
   .main-tabs
-    height 100%
+    height 0
     flex auto 1 1
 
   >>> .vue-ui-tab
@@ -86,6 +86,7 @@ export default {
 
   >>> .tabs-content
     height 0
+    flex auto 1 1
 
   &,
   >>> .vue-ui-tab,
@@ -121,7 +122,7 @@ export default {
     margin 0 auto
     $max-width = 1200px
     .shell
-      background $color-background-light
+      background $md-white
     .header .content,
     >>> .vue-ui-tab
       max-width $max-width

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

@@ -1,21 +1,27 @@
+const path = require('path')
+// Subs
 const channels = require('../channels')
 
 let addons = []
 
+let baseUrl = process.env.VUE_APP_GRAPHQL_ENDPOINT
+if (typeof baseUrl === 'undefined') baseUrl = 'http://localhost:4000'
+console.log(process.env.VUE_APP_GRAPHQL_ENDPOINT, baseUrl)
+
 function list (context) {
   return addons
 }
 
 function add (options, context) {
-  if (findOne(options.id)) return
+  if (findOne(options.id)) remove(options.id, context)
 
   addons.push(options)
   context.pubsub.publish(channels.CLIENT_ADDON_ADDED, {
     clientAddonAdded: options
   })
 }
 
-function findOne (id, context) {
+function findOne (id, context = null) {
   return addons.find(
     addon => addon.id === id
   )
@@ -28,9 +34,35 @@ function remove (id, context) {
   if (index !== -1) addons.splice(index, 1)
 }
 
+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)
+  if (addon) {
+    const basePath = getBasePath(require.resolve(addon.path))
+    res.sendFile(path.join(basePath, file))
+  } else {
+    res.status(404)
+    res.send(`Addon ${id} not found in loaded addons. Try opening a vue-cli project first?`)
+  }
+}
+
 module.exports = {
   list,
   add,
   remove,
-  findOne
+  findOne,
+  getUrl,
+  serve
 }

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

@@ -23,6 +23,16 @@ process.env.VUE_CLI_API_MODE = true
 const resolvers = [{
   JSON: GraphQLJSON,
 
+  DescribedEntity: {
+    __resolveType (obj, context, info) {
+      return null
+    }
+  },
+
+  ClientAddon: {
+    url: (addon, args, context) => clientAddons.getUrl(addon, context)
+  },
+
   Query: {
     cwd: () => cwd.get(),
     progress: (root, { id }, context) => progress.get(id, context),

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

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

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

@@ -17,7 +17,7 @@ h2
 
 .actions-bar
   padding $padding-item
-  background $color-background-light
+  background $md-white
   h-box()
   box-center()
   position relative

packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue

@@ -53,6 +53,7 @@
         <VueGroup
           v-if="task.views.length"
           v-model="currentView"
+          class="views"
         >
           <VueGroupButton
             :label="$t('views.project-task-details.output')"
@@ -280,6 +281,13 @@ export default {
   align-items stretch
   height 100%
 
+  @media (max-width: 1250px)
+    .actions-bar
+      flex-wrap wrap
+
+    .views
+      margin-top $padding-item
+
   .command
     font-family $font-mono
     font-size 12px

packages/@vue/cli-ui/src/vue-apollo.js

@@ -5,9 +5,16 @@ import createApolloClient from './apollo'
 // Install the vue plugin
 Vue.use(VueApollo)
 
+let base = process.env.VUE_APP_GRAPHQL_ENDPOINT
+if (typeof base === 'undefined') {
+  base = 'http://localhost:4000'
+} else if (base === '') {
+  base = window.location.origin
+}
+
 // Config
 const options = {
-  base: process.env.VUE_APP_GRAPHQL_ENDPOINT || 'http://localhost:4000',
+  base,
   endpoints: {
     graphql: process.env.VUE_APP_GRAPHQL_PATH || '/graphql',
     subscription: process.env.VUE_APP_GRAPHQL_SUBSCRIPTIONS_PATH || '/graphql'

packages/@vue/cli/bin/vue.js

@@ -89,6 +89,14 @@ program
     loadCommand('build', '@vue/cli-service-global').build(entry, cleanArgs(cmd))
   })
 
+program
+  .command('ui')
+  .option('-p, --port <port>', 'Port used for the UI server (by default search for awailable port)')
+  .description('start and open the vue-cli ui')
+  .action((cmd) => {
+    require('../lib/ui')(cleanArgs(cmd))
+  })
+
 program
   .command('init <template> <app-name>')
   .description('generate a project from a remote template (legacy API, requires @vue/cli-init)')