feat(ui): install/uninstall plugin

vuejs · Mar 12, 2018 · 63ccde8 · 63ccde8
1 parent da0d37e
commit 63ccde8
Show file tree

Hide file tree

Showing 19 changed files with 331 additions and 35 deletions.
diff --git a/packages/@vue/cli-ui/src/components/InstantSearchInput.vue b/packages/@vue/cli-ui/src/components/InstantSearchInput.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="instant-search-input">
     <VueInput
+      ref="input"
       icon-left="search"
       v-model="query"
       class="big"
@@ -55,6 +56,10 @@ export default {
       }
       this.searchStore.start()
       this.searchStore.refresh()
+    },
+
+    focus () {
+      this.$refs.input.focus()
     }
   }
 }

diff --git a/packages/@vue/cli-ui/src/components/ItemLogo.vue b/packages/@vue/cli-ui/src/components/ItemLogo.vue
@@ -4,6 +4,7 @@
     :class="{
       selected,
       loaded,
+      error,
       vuejs: image && image.includes('vuejs')
     }"
   >
@@ -13,11 +14,12 @@
         icon="done"
       />
       <img
-        v-else-if="image"
+        v-else-if="image && !error"
         class="image"
         :src="image"
         :key="image"
         @load="loaded = true"
+        @error="error = true"
       >
       <VueIcon
         v-else
@@ -48,13 +50,20 @@ export default {
 
   data () {
     return {
-      loaded: false
+      loaded: false,
+      error: false
     }
   },
 
   watch: {
-    image (value) {
+    image: 'reset',
+    selected: 'reset'
+  },
+
+  methods: {
+    reset () {
       this.loaded = false
+      this.error = false
     }
   }
 }
@@ -97,10 +106,14 @@ export default {
       animation zoom .1s
       transform none
 
+  &.selected,
+  &.error
+    .wrapper
+      animation zoom .1s
+
   &.selected
     .wrapper
       background $vue-color-primary
-      animation zoom .1s
       .vue-icon
         >>> svg
           fill $vue-color-light

diff --git a/packages/@vue/cli-ui/src/components/PackageSearchItem.vue b/packages/@vue/cli-ui/src/components/PackageSearchItem.vue
@@ -31,6 +31,10 @@
             attribute-name="description"
           />
         </span>
+        <span v-if="official" class="info">
+          <VueIcon icon="star" class="top medium"/>
+          <span>Official</span>
+        </span>
         <span class="info downloads">
           <VueIcon class="medium" icon="file_download"/>
           <span>{{ pkg.humanDownloadsLast30Days }}</span>
@@ -56,6 +60,12 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+
+  computed: {
+    official () {
+      return this.pkg.owner.name === 'vuejs'
+    }
   }
 }
 </script>

diff --git a/packages/@vue/cli-ui/src/graphql-api/channels.js b/packages/@vue/cli-ui/src/graphql-api/channels.js
@@ -1,5 +1,6 @@
 module.exports = {
   CWD_CHANGED: 'cwd_changed',
   PROGRESS_CHANGED: 'progress_changed',
+  PROGRESS_REMOVED: 'progress_removed',
   CONSOLE_LOG_ADDED: 'console_log_added'
 }
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js b/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js
@@ -1,11 +1,24 @@
 const path = require('path')
 const fs = require('fs')
 const LRU = require('lru-cache')
-const { isPlugin, isOfficialPlugin, getPluginLink } = require('@vue/cli-shared-utils')
+const {
+  isPlugin,
+  isOfficialPlugin,
+  getPluginLink,
+  hasYarn
+} = require('@vue/cli-shared-utils')
 const getPackageVersion = require('@vue/cli/lib/util/getPackageVersion')
+const {
+  progress: installProgress,
+  installPackage,
+  uninstallPackage
+} = require('@vue/cli/lib/util/installDeps')
+const { loadOptions } = require('@vue/cli/lib/options')
 
 const cwd = require('./cwd')
 const folders = require('./folders')
+const prompts = require('./prompts')
+const progress = require('./progress')
 
 const metadataCache = new LRU({
   max: 200,
@@ -16,6 +29,11 @@ const logoCache = new LRU({
   max: 50
 })
 
+const PROGRESS_ID = 'plugin-installation'
+
+let currentPluginId
+let eventsInstalled = false
+
 function getPath (id) {
   return path.join(cwd.get(), 'node_modules', id)
 }
@@ -108,9 +126,82 @@ async function getLogo ({ id }, context) {
   return null
 }
 
+function getInstallation (context) {
+  if (!eventsInstalled) {
+    eventsInstalled = true
+
+    // Package installation progress events
+    installProgress.on('progress', value => {
+      if (progress.get(PROGRESS_ID)) {
+        progress.set({ id: PROGRESS_ID, progress: value }, context)
+      }
+    })
+    installProgress.on('log', message => {
+      if (progress.get(PROGRESS_ID)) {
+        progress.set({ id: PROGRESS_ID, info: message }, context)
+      }
+    })
+  }
+
+  return {
+    id: 'plugin-install',
+    pluginId: currentPluginId,
+    prompts: prompts.list()
+  }
+}
+
+function install (id, context) {
+  return progress.wrap(PROGRESS_ID, context, async setProgress => {
+    setProgress({
+      status: 'plugin-install',
+      args: [id]
+    })
+
+    currentPluginId = id
+
+    const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
+    await installPackage(cwd.get(), packageManager, null, id)
+
+    return getInstallation(context)
+  })
+}
+
+function uninstall (id, context) {
+  return progress.wrap(PROGRESS_ID, context, async setProgress => {
+    setProgress({
+      status: 'plugin-uninstall',
+      args: [id]
+    })
+
+    currentPluginId = id
+
+    const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
+    await uninstallPackage(cwd.get(), packageManager, null, id)
+
+    return getInstallation(context)
+  })
+}
+
+function invoke (id, context) {
+  return progress.wrap(PROGRESS_ID, context, async setProgress => {
+    setProgress({
+      status: 'plugin-invoke',
+      args: [id]
+    })
+
+    currentPluginId = id
+    // TODO
+    return getInstallation(context)
+  })
+}
+
 module.exports = {
   list,
   getVersion,
   getDescription,
-  getLogo
+  getLogo,
+  getInstallation,
+  install,
+  uninstall,
+  invoke
 }
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/progress.js b/packages/@vue/cli-ui/src/graphql-api/connectors/progress.js
@@ -15,6 +15,7 @@ function set (data, context) {
       status: null,
       error: null,
       info: null,
+      args: null,
       progress: -1
     }, progress))
   } else {
@@ -25,6 +26,7 @@ function set (data, context) {
 }
 
 function remove (id, context) {
+  context.pubsub.publish(channels.PROGRESS_REMOVED, { progressRemoved: { id } })
   return map.delete(id)
 }
 

diff --git a/packages/@vue/cli-ui/src/graphql-api/resolvers.js b/packages/@vue/cli-ui/src/graphql-api/resolvers.js
@@ -42,7 +42,8 @@ module.exports = {
     foldersFavorite: (root, args, context) => folders.listFavorite(context),
     projects: (root, args, context) => projects.list(context),
     projectCurrent: (root, args, context) => projects.getCurrent(context),
-    projectCreation: (root, args, context) => projects.getCreation(context)
+    projectCreation: (root, args, context) => projects.getCreation(context),
+    pluginInstallation: (root, args, context) => plugins.getInstallation(context)
   },
 
   Mutation: {
@@ -60,7 +61,10 @@ module.exports = {
     projectImport: (root, { input }, context) => projects.import(input, context),
     projectOpen: (root, { id }, context) => projects.open(id, context),
     projectRemove: (root, { id }, context) => projects.remove(id, context),
-    projectCwdReset: (root, args, context) => projects.resetCwd(context)
+    projectCwdReset: (root, args, context) => projects.resetCwd(context),
+    pluginInstall: (root, { id }, context) => plugins.install(id, context),
+    pluginUninstall: (root, { id }, context) => plugins.uninstall(id, context),
+    pluginInvoke: (root, { id }, context) => plugins.invoke(id, context)
   },
 
   Subscription: {
@@ -75,6 +79,14 @@ module.exports = {
         (payload, variables) => payload.progressChanged.id === variables.id
       )
     },
+    progressRemoved: {
+      subscribe: withFilter(
+        // Iterator
+        (parent, args, { pubsub }) => pubsub.asyncIterator(channels.PROGRESS_REMOVED),
+        // Filter
+        (payload, variables) => payload.progressRemoved.id === variables.id
+      )
+    },
     consoleLogAdded: {
       subscribe: (parent, args, context) => {
         logs.init(context)

diff --git a/packages/@vue/cli-ui/src/graphql-api/type-defs.js b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
@@ -84,10 +84,15 @@ type Plugin {
   website: String
   description: String
   githubStats: GitHubStats
-  prompts: [Prompt]
   logo: String
 }
 
+type PluginInstallation {
+  id: ID!
+  pluginId: ID
+  prompts: [Prompt]
+}
+
 type Feature {
   id: ID!
   name: String!
@@ -145,6 +150,7 @@ type Progress {
   error: String
   # Progress from 0 to 1 (-1 means disabled)
   progress: Float
+  args: [String]
 }
 
 type Query {
@@ -157,6 +163,7 @@ type Query {
   projects: [Project]
   projectCurrent: Project
   projectCreation: ProjectCreation
+  pluginInstallation: PluginInstallation
 }
 
 type Mutation {
@@ -172,12 +179,15 @@ type Mutation {
   projectCwdReset: String
   presetApply (id: ID!): ProjectCreation
   featureSetEnabled (id: ID!, enabled: Boolean): Feature
-  pluginAdd (id: ID!): Plugin
   promptAnswer (input: PromptInput!): [Prompt]
+  pluginInstall (id: ID!): PluginInstallation
+  pluginUninstall (id: ID!): PluginInstallation
+  pluginInvoke (id: ID!): PluginInstallation
 }
 
 type Subscription {
   progressChanged (id: ID!): Progress
+  progressRemoved (id: ID!): ID
   consoleLogAdded: ConsoleLog!
   cwdChanged: String!
 }

diff --git a/packages/@vue/cli-ui/src/graphql/pluginInstall.gql b/packages/@vue/cli-ui/src/graphql/pluginInstall.gql
@@ -0,0 +1,7 @@
+#import "./pluginInstallationFragment.gql"
+
+mutation pluginInstall ($id: ID!) {
+  pluginInstall (id: $id) {
+    ...pluginInstallation
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginInstallation.gql b/packages/@vue/cli-ui/src/graphql/pluginInstallation.gql
@@ -0,0 +1,7 @@
+#import "./pluginInstallationFragment.gql"
+
+query pluginInstallation {
+  pluginInstallation {
+    ...pluginInstallation
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginInstallationFragment.gql b/packages/@vue/cli-ui/src/graphql/pluginInstallationFragment.gql
@@ -0,0 +1,8 @@
+#import "./promptFragment.gql"
+
+fragment pluginInstallation on PluginInstallation {
+  id
+  prompts {
+    ...prompt
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginInvoke.gql b/packages/@vue/cli-ui/src/graphql/pluginInvoke.gql
@@ -0,0 +1,7 @@
+#import "./pluginInstallationFragment.gql"
+
+mutation pluginInvoke ($id: ID!) {
+  pluginInvoke (id: $id) {
+    ...pluginInstallation
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginUninstall.gql b/packages/@vue/cli-ui/src/graphql/pluginUninstall.gql
@@ -0,0 +1,7 @@
+#import "./pluginInstallationFragment.gql"
+
+mutation pluginUninstall ($id: ID!) {
+  pluginUninstall (id: $id) {
+    ...pluginInstallation
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/progressFragment.gql b/packages/@vue/cli-ui/src/graphql/progressFragment.gql
@@ -4,4 +4,5 @@ fragment progress on Progress {
   info
   error
   progress
+  args
 }
diff --git a/packages/@vue/cli-ui/src/graphql/progressRemoved.gql b/packages/@vue/cli-ui/src/graphql/progressRemoved.gql
@@ -0,0 +1,3 @@
+subscription progressRemoved ($id: ID!) {
+  progressRemoved (id: $id)
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,5 @@ fragment progress on Progress { @@
       info
       error
       progress
+      args
     }