fix(ui): fix beta.12 feedback (#1386)

* fix(ui): npm/yarn installing only dependencies

* fix(ui): add all dependencies to package.json

* fix(Service): give priority to devDependencies plugins

* feat(ui): connection status banner

* fix(ui): don't display disconnected banner for initial app load

* fix(ui): default value for prompt type=checkbox

* feat: builtin prompts default values

* fix(ui): circular dep

Author: Akryum

packages/@vue/cli-plugin-eslint/prompts.js

@@ -39,7 +39,8 @@ module.exports = [
     choices: [
       {
         name: 'Lint on save',
-        value: 'save'
+        value: 'save',
+        checked: true
       },
       {
         name: 'Lint and fix on commit' + (hasGit() ? '' : chalk.red(' (requires Git)')),

packages/@vue/cli-plugin-typescript/prompts.js

@@ -8,7 +8,8 @@ module.exports = [
   {
     name: `classComponent`,
     type: `confirm`,
-    message: `Use class-style component syntax?`
+    message: `Use class-style component syntax?`,
+    default: true
   },
   {
     name: `useTsWithBabel`,
@@ -28,7 +29,8 @@ module.exports = [
     choices: [
       {
         name: 'Lint on save',
-        value: 'save'
+        value: 'save',
+        checked: true
       },
       {
         name: 'Lint and fix on commit' + (hasGit() ? '' : chalk.red(' (requires Git)')),

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

@@ -134,8 +134,8 @@ module.exports = class Service {
         ? builtInPlugins.concat(inlinePlugins)
         : inlinePlugins
     } else {
-      const projectPlugins = Object.keys(this.pkg.dependencies || {})
-        .concat(Object.keys(this.pkg.devDependencies || {}))
+      const projectPlugins = Object.keys(this.pkg.devDependencies || {})
+        .concat(Object.keys(this.pkg.dependencies || {}))
         .filter(isPlugin)
         .map(idToPlugin)
       return builtInPlugins.concat(projectPlugins)

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

@@ -6,5 +6,8 @@ module.exports = {
   ],
   globals: {
     ClientAddonApi: false
-  }
+  },
+  plugins: [
+    'graphql'
+  ]
 }

packages/@vue/cli-ui/locales/en.json

@@ -1,5 +1,9 @@
 {
   "components": {
+    "connection-status": {
+      "disconnected": "Disconnected from UI server",
+      "connected": "Connected!"
+    },
     "file-diff": {
       "binary": "Binary file not shown",
       "actions": {

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

@@ -16,23 +16,30 @@
     "test": "yarn run build && cd ../cli-ui-addon-webpack && yarn run build && cd ../cli-ui && yarn run test:run"
   },
   "dependencies": {
+    "@vue/cli-shared-utils": "^3.0.0-beta.12",
+    "chalk": "^2.4.1",
     "clone": "^2.1.1",
     "deepmerge": "^2.1.0",
+    "execa": "^0.10.0",
     "express-history-api-fallback": "^2.2.1",
     "fs-extra": "^6.0.0",
+    "globby": "^8.0.1",
     "graphql": "^0.13.0",
     "graphql-tag": "^2.9.2",
     "graphql-type-json": "^0.2.0",
+    "javascript-stringify": "^1.6.0",
     "js-yaml": "^3.11.0",
     "launch-editor": "^2.2.1",
     "lodash.merge": "^4.6.1",
     "lowdb": "^1.0.0",
     "lru-cache": "^4.1.2",
+    "node-ipc": "^9.1.1",
     "node-notifier": "^5.2.1",
+    "portfinder": "^1.0.13",
     "semver": "^5.5.0",
     "shortid": "^2.2.8",
     "terminate": "^2.1.0",
-    "vue-cli-plugin-apollo": "^0.11.0",
+    "vue-cli-plugin-apollo": "^0.13.0",
     "watch": "^1.0.2"
   },
   "devDependencies": {
@@ -45,6 +52,7 @@
     "ansi_up": "^2.0.2",
     "cross-env": "^5.1.5",
     "eslint": "^4.16.0",
+    "eslint-plugin-graphql": "^2.1.1",
     "file-icons-js": "^1.0.3",
     "lint-staged": "^6.0.0",
     "start-server-and-test": "^1.4.1",

packages/@vue/cli-ui/src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="app" class="app">
+    <ConnectionStatus v-if="ready" />
     <div v-if="ready" class="content">
       <router-view/>
     </div>
@@ -39,8 +40,11 @@ export default {
 .app
   display grid
   grid-template-columns 1fr
-  grid-template-rows 1fr auto
-  grid-template-areas "content" "status"
+  grid-template-rows auto 1fr auto
+  grid-template-areas "connection" "content" "status"
+
+.connection-status
+  grid-area connection
 
 .content
   grid-area content

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

@@ -0,0 +1,99 @@
+<template>
+  <ApolloQuery
+    :query="require('../graphql/connected.gql')"
+    class="connection-status"
+  >
+    <template slot-scope="{ result: { data: { connected } } }">
+      <transition duration="1000">
+        <div
+          v-if="!connected"
+          class="banner"
+        >
+          <div class="content disconnected">
+            <VueIcon icon="cloud_off" class="medium"/>
+            <span>{{ $t('components.connection-status.disconnected') }}</span>
+          </div>
+          <div class="content connected">
+            <VueIcon icon="wifi" class="medium"/>
+            <span>{{ $t('components.connection-status.connected') }}</span>
+          </div>
+        </div>
+      </transition>
+    </template>
+  </ApolloQuery>
+</template>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.content
+  display flex
+  align-items center
+  justify-content center
+  position absolute
+  top 0
+  left 0
+  width 100%
+  height 100%
+
+.banner
+  background $vue-ui-color-danger
+  color $md-white
+  height 45px
+  position relative
+  .vue-ui-icon
+    margin-right $padding-item
+  >>> svg
+    fill @color
+
+  &.v-enter-active,
+  &.v-leave-active
+    overflow hidden
+  &.v-enter-active
+    transition height .15s ease-out
+    .vue-ui-icon
+      animation icon .5s
+  &.v-leave-active
+    transition height .15s .85s ease-out, background .15s
+    .disconnected
+      animation slide-to-bottom .15s forwards
+    .connected
+      animation slide-from-top .15s
+  &:not(.v-leave-active)
+    .connected
+      display none
+
+  &.v-enter,
+  &.v-leave-to
+    height 0
+  &.v-leave-to
+    background $vue-ui-color-success
+
+@keyframes icon
+  0%
+    transform scale(.8)
+    opacity 0
+  30%
+    transform scale(.8)
+    opacity 1
+  50%
+    transform scale(1.3)
+  100%
+    transform scale(1)
+
+@keyframes slide-to-bottom
+  0%
+    transform none
+    opacity 1
+  100%
+    transform translateY(45px)
+    opacity 0
+
+@keyframes slide-from-top
+  0%
+    transform translateY(-45px)
+    opacity 0
+  100%
+    transform none
+    opacity 1
+</style>

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

@@ -218,7 +218,7 @@ async function getDefaultValue (prompt) {
   }
 
   if (prompt.type === 'checkbox') {
-    const choices = await getChoices(prompt)
+    const choices = prompt.raw.choices
     if (choices) {
       return choices.filter(
         c => c.checked

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

@@ -0,0 +1,3 @@
+module.exports = {
+  // GraphQL directives here
+}

packages/@vue/cli-ui/src/graphql/connected.gql

@@ -0,0 +1,3 @@
+query connected {
+  connected @client
+}

packages/@vue/cli-ui/src/graphql/connectedSet.gql

@@ -0,0 +1,3 @@
+mutation connectedSet ($value: Boolean!) {
+  connectedSet (value: $value) @client
+}

packages/@vue/cli-ui/src/state/defaults.js

@@ -0,0 +1,3 @@
+export default {
+  connected: false
+}

packages/@vue/cli-ui/src/state/resolvers.js

@@ -0,0 +1,10 @@
+export default {
+  Mutation: {
+    connectedSet: (root, { value }, { cache }) => {
+      const data = {
+        connected: value
+      }
+      cache.writeData({ data })
+    }
+  }
+}

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

@@ -1,6 +1,9 @@
 import Vue from 'vue'
 import VueApollo from 'vue-apollo'
 import { createApolloClient } from 'vue-cli-plugin-apollo/graphql-client'
+import clientStateDefaults from './state/defaults'
+import clientStateResolvers from './state/resolvers'
+import CONNECTED_SET from './graphql/connectedSet.gql'
 
 // Install the vue plugin
 Vue.use(VueApollo)
@@ -16,13 +19,34 @@ if (typeof endpoint === 'undefined') {
 const options = {
   wsEndpoint: endpoint,
   persisting: false,
-  websocketsOnly: true
+  websocketsOnly: true,
+  clientState: {
+    defaults: clientStateDefaults,
+    resolvers: clientStateResolvers
+  }
 }
 
 // Create apollo client
-export const { apolloClient } = createApolloClient(options)
+export const { apolloClient, wsClient } = createApolloClient(options)
 
 // Create vue apollo provider
 export const apolloProvider = new VueApollo({
   defaultClient: apolloClient
 })
+
+/* Connected state */
+
+function setConnected (value) {
+  apolloClient.mutate({
+    mutation: CONNECTED_SET,
+    variables: {
+      value
+    }
+  })
+}
+
+wsClient.on('connected', () => setConnected(true))
+wsClient.on('reconnected', () => setConnected(true))
+// Offline
+wsClient.on('disconnected', () => setConnected(false))
+wsClient.on('error', () => setConnected(false))

packages/@vue/cli/lib/promptModules/typescript.js

@@ -12,7 +12,8 @@ module.exports = cli => {
     name: 'tsClassComponent',
     when: answers => answers.features.includes('ts'),
     type: 'confirm',
-    message: 'Use class-style component syntax?'
+    message: 'Use class-style component syntax?',
+    default: true
   })
 
   cli.injectPrompt({

packages/@vue/cli/lib/ui.js

@@ -11,6 +11,7 @@ async function ui (options = {}, context = process.cwd()) {
   process.env.VUE_APP_CLI_UI_URL = ''
 
   if (!options.dev) {
+    // Optimize express
     process.env.NODE_ENV = 'production'
   }
 
@@ -38,6 +39,10 @@ async function ui (options = {}, context = process.cwd()) {
   }
 
   server(opts, () => {
+    // Reset for yarn/npm to work correctly
+    process.env.NODE_ENV = undefined
+
+    // Open browser
     const url = `http://localhost:${port}`
     if (!options.quiet) log(`🌠  Ready on ${url}`)
     if (options.headless) {