feat(ui): plugin add prompts

vuejs · Mar 14, 2018 · ce4cf9a · ce4cf9a
1 parent 63ccde8
commit ce4cf9a
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 212 deletions.
diff --git a/packages/@vue/cli-ui/package.json b/packages/@vue/cli-ui/package.json
@@ -6,7 +6,8 @@
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "graphql-api": "vue-cli-service graphql-api",
- "run-graphql-api": "vue-cli-service run-graphql-api"
+ "run-graphql-api": "vue-cli-service run-graphql-api",
+ "prod-graphql-api": "cross-env NODE_ENV=production vue-cli-service run-graphql-api"
  },
  "dependencies": {
  "graphql": "^0.13.0",
@@ -38,7 +39,7 @@
  "subscriptions-transport-ws": "^0.9.5",
  "vue": "^2.5.13",
  "vue-apollo": "^3.0.0-beta.5",
- "vue-cli-plugin-apollo": "^0.4.1",
+ "vue-cli-plugin-apollo": "^0.6.1",
  "vue-instantsearch": "^1.5.1",
  "vue-router": "^3.0.1",
  "vue-template-compiler": "^2.5.13",

diff --git a/packages/@vue/cli-ui/src/components/PromptInput.vue b/packages/@vue/cli-ui/src/components/PromptInput.vue
@@ -0,0 +1,27 @@
+<template>
+ <div class="prompt prompt-input">
+ <div class="prompt-content">
+ <ListItemInfo
+ :name="prompt.message"
+ :description="prompt.description"
+ :link="prompt.link"
+ />
+
+ <div class="prompt-input">
+ <VueInput
+ :value="value(prompt.value)"
+ :type="prompt.type === 'password' ? 'password' : 'text'"
+ @input="value => answer(value)"
+ />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import Prompt from './Prompt'
+
+export default {
+ extends: Prompt
+}
+</script>
diff --git a/packages/@vue/cli-ui/src/components/PromptsList.vue b/packages/@vue/cli-ui/src/components/PromptsList.vue
@@ -14,6 +14,11 @@
 </template>
 
 <script>
+const types = {
+ rawlist: 'list',
+ password: 'input'
+}
+
 export default {
  props: {
  prompts: {
@@ -24,7 +29,11 @@ export default {
 
  methods: {
  getModule (prompt) {
- const type = prompt.type.charAt(0).toUpperCase() + prompt.type.substr(1)
+ let type = prompt.type
+ if (types[type]) {
+ type = types[type]
+ }
+ type = type.charAt(0).toUpperCase() + type.substr(1)
  return require(`./Prompt${type}.vue`).default
  }
  }

diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js b/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js
@@ -162,6 +162,8 @@ function install (id, context) {
  const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
  await installPackage(cwd.get(), packageManager, null, id)
 
+ await initPrompts(id, context)
+
  return getInstallation(context)
  })
 }
@@ -178,6 +180,8 @@ function uninstall (id, context) {
  const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
  await uninstallPackage(cwd.get(), packageManager, null, id)
 
+ currentPluginId = null
+
  return getInstallation(context)
  })
 }
@@ -190,11 +194,25 @@ function invoke (id, context) {
  })
 
  currentPluginId = id
+
  // TODO
+
+ currentPluginId = null
+
  return getInstallation(context)
  })
 }
 
+async function initPrompts (id, context) {
+ prompts.reset()
+ let data = require(path.join(getPath(id), 'prompts.js'))
+ if (typeof data === 'function') {
+ data = await data()
+ }
+ data.forEach(prompts.add)
+ prompts.start()
+}
+
 module.exports = {
  list,
  getVersion,

diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/projects.js b/packages/@vue/cli-ui/src/graphql-api/connectors/projects.js
@@ -126,6 +126,7 @@ function initCreator (context) {
  // Prompts
  prompts.reset()
  creator.injectedPrompts.forEach(prompts.add)
+ prompts.start()
 
  return creator
 }

diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js b/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js
@@ -41,7 +41,7 @@ function getDefaultValue (prompt) {
 function getEnabled (value) {
  const type = typeof value
  if (type === 'function') {
- return value(answers)
+ return !!value(answers)
  } else if (type === 'boolean') {
  return value
  } else {
@@ -198,6 +198,10 @@ function add (data) {
  prompts.push(generatePrompt(data))
 }
 
+function start () {
+ updatePrompts()
+}
+
 function remove (id) {
  const index = prompts.findIndex(p => p.id === id)
  index !== -1 && prompts.splice(index, 1)
@@ -232,5 +236,6 @@ module.exports = {
  list,
  add,
  remove,
+ start,
  setValue
 }
diff --git a/packages/@vue/cli-ui/src/graphql/pluginInstallationFragment.gql b/packages/@vue/cli-ui/src/graphql/pluginInstallationFragment.gql
@@ -2,6 +2,7 @@
 
 fragment pluginInstallation on PluginInstallation {
  id
+ pluginId
  prompts {
  ...prompt
  }

diff --git a/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue b/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
@@ -33,7 +33,7 @@
  'name',
  'description'
  ],
- // filters: `keywords:vue-cli-plugin`
+ filters: `keywords:vue-cli-plugin`
  }"
  >
  <InstantSearchInput ref="searchInput"/>
@@ -163,7 +163,6 @@ export default {
  return {
  tabId: 'search',
  selectedId: null,
- enabledPrompts: [],
  showCancelInstall: false,
  pluginInstallation: null
  }
@@ -172,13 +171,29 @@ export default {
  apollo: {
  pluginInstallation: {
  query: PLUGIN_INSTALLATION,
- fetchPolicy: 'netork-only'
+ fetchPolicy: 'netork-only',
+ result () {
+ if (this.pluginInstallation.pluginId) {
+ this.tabId = 'config'
+ } else {
+ this.tabId = 'search'
+ }
+ },
  }
  },
 
  computed: {
  configurationValid () {
  return false
+ },
+
+ enabledPrompts () {
+ if (!this.pluginInstallation) {
+ return []
+ }
+ return this.pluginInstallation.prompts.filter(
+ p => p.enabled
+ )
  }
  },