feat(ui): remote preset support

Author: Guillaume Chau

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

@@ -258,7 +258,15 @@
           },
           "remote": {
             "name": "Remote preset",
-            "description": "Fetch a preset from a git repository"
+            "description": "Fetch a preset from a git repository",
+            "url": {
+              "title": "Preset URL",
+              "subtitle": "Git repo, for example 'username/repo'. You can also prefix with 'gitlab:' or 'bitbucket:'."
+            },
+            "options": "Other options",
+            "clone": "Private repository",
+            "cancel": "Cancel",
+            "done": "Done"
           },
           "default-preset": "Default preset"
         },

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

@@ -56,6 +56,7 @@
     "eslint": "^4.16.0",
     "eslint-plugin-graphql": "^2.1.1",
     "lint-staged": "^6.0.0",
+    "lodash.debounce": "^4.0.8",
     "portal-vue": "^1.3.0",
     "rimraf": "^2.6.2",
     "start-server-and-test": "^1.4.1",

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

@@ -18,7 +18,7 @@
 
       <ListItemInfo
         :name="$t(preset.name)"
-        :description="$t(preset.description)"
+        :description="description || $t(preset.description)"
         :link="preset.link"
         :selected="selected"
       />
@@ -37,6 +37,11 @@ export default {
     selected: {
       type: Boolean,
       required: true
+    },
+
+    description: {
+      type: String,
+      default: null
     }
   }
 }

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

@@ -302,9 +302,9 @@ async function create (input, context) {
       info: 'Resolving preset...'
     })
     let preset
-    if (input.remote) {
+    if (input.preset === '__remote__' && input.remote) {
       // vue create foo --preset bar
-      preset = await creator.resolvePreset(input.preset, input.clone)
+      preset = await creator.resolvePreset(input.remote, input.clone)
     } else if (input.preset === 'default') {
       // vue create foo --default
       preset = defaults.presets.default

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

@@ -36,7 +36,7 @@ input ProjectCreateInput {
   force: Boolean!
   packageManager: PackageManager
   preset: String!
-  remote: Boolean
+  remote: String
   clone: Boolean
   save: String
   enableGit: Boolean!

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

@@ -176,8 +176,9 @@
 
               <ProjectPresetItem
                 :preset="remotePresetInfo"
-                :selected="formData.selectedPreset === 'remote'"
-                @click.native="selectPreset('remote')"
+                :selected="formData.selectedPreset === '__remote__'"
+                :description="formData.remotePreset.url"
+                @click.native="selectPreset('__remote__')"
               />
             </div>
 
@@ -202,6 +203,7 @@
                 icon-left="done"
                 :label="$t('views.project-create.tabs.presets.buttons.create')"
                 class="big primary next"
+                :disabled="!formData.selectedPreset"
                 @click="createWithoutSaving()"
               />
             </div>
@@ -327,16 +329,49 @@
     <VueModal
       v-if="showRemotePreset"
       :title="$t('views.project-create.tabs.presets.modal.title')"
-      class="medium"
-      @close="showRemotePreset = false"
+      class="small remove-preset-modal"
+      @close="closeRemotePresetModal()"
     >
-      <div class="default-body">
-        <div class="vue-ui-empty">
-          <VueIcon icon="cake" class="large"/>
-          <div>
-            {{ $t('views.project-create.tabs.presets.modal.body') }}
-          </div>
-        </div>
+      <div class="default-body vue-ui-grid big-gap col-1">
+        <VueFormField
+          :title="$t('views.project-create.tabs.presets.remote.url.title')"
+          :subtitle="$t('views.project-create.tabs.presets.remote.url.subtitle')"
+        >
+          <VueInput
+            v-model="formData.remotePreset.url"
+            icon-left="language"
+            v-focus
+          />
+        </VueFormField>
+
+        <VueFormField
+          :title="$t('views.project-create.tabs.presets.remote.options')"
+        >
+          <VueSwitch
+            v-model="formData.remotePreset.clone"
+            class="extend-left"
+            :disabled="remoteNotGithub"
+          >
+            {{ $t('views.project-create.tabs.presets.remote.clone') }}
+          </VueSwitch>
+        </VueFormField>
+      </div>
+
+      <div slot="footer" class="actions space-between">
+        <VueButton
+          :label="$t('views.project-create.tabs.presets.remote.cancel')"
+          class="flat"
+          @click="closeRemotePresetModal(true)"
+        />
+
+        <VueButton
+          :label="$t('views.project-create.tabs.presets.remote.done')"
+          :disabled="!formData.remotePreset.url || !remotePresetValid"
+          :loading-secondary="remotePresetValid === null"
+          icon-left="done"
+          class="primary"
+          @click="closeRemotePresetModal()"
+        />
       </div>
     </VueModal>
 
@@ -420,6 +455,7 @@
 <script>
 import Prompts from '../mixins/Prompts'
 import { isValidName } from '../util/folders'
+import debounce from 'lodash.debounce'
 
 import CWD from '../graphql/cwd.gql'
 import PROJECT_CREATION from '../graphql/projectCreation.gql'
@@ -470,6 +506,7 @@ export default {
       showCancel: false,
       showRemotePreset: false,
       showSavePreset: false,
+      remotePresetValid: false,
       debug: ''
     }
   },
@@ -508,22 +545,37 @@ export default {
         name: 'views.project-create.tabs.presets.remote.name',
         description: 'views.project-create.tabs.presets.remote.description'
       }
+    },
+
+    remoteNotGithub () {
+      const { url } = this.formData.remotePreset
+      return url && /^(gitlab|bitbucket):/.test(url)
     }
   },
 
+  watch: {
+    'formData.remotePreset.url' (value) {
+      this.debouncedCheckRemotePreset()
+    }
+  },
+
+  created () {
+    this.debouncedCheckRemotePreset = debounce(this.checkRemotePreset, 1000)
+  },
+
   beforeDestroy () {
     this.cancel()
   },
 
   methods: {
     async selectPreset (id) {
-      if (id === 'remote') {
+      this.formData.selectedPreset = id
+
+      if (id === '__remote__') {
         this.showRemotePreset = true
         return
       }
 
-      this.formData.selectedPreset = id
-
       await this.$apollo.mutate({
         mutation: PRESET_APPLY,
         variables: {
@@ -586,6 +638,39 @@ export default {
       await this.$apollo.mutate({
         mutation: PROJECT_CANCEL_CREATION
       })
+    },
+
+    closeRemotePresetModal (clear = false) {
+      if (clear) {
+        this.formData.remotePreset.url = ''
+      }
+
+      this.showRemotePreset = false
+      if (!this.formData.remotePreset.url) {
+        this.formData.selectedPreset = null
+      }
+    },
+
+    async checkRemotePreset () {
+      if (!this.formData.remotePreset.url) {
+        this.remotePresetValid = false
+        return
+      }
+
+      if (this.remoteNotGithub) {
+        this.formData.remotePreset.clone = true
+      }
+
+      if (this.formData.remotePreset.clone) {
+        this.remotePresetValid = true
+      } else {
+        this.remotePresetValid = null
+
+        const url = `https://raw.githubusercontent.com/${this.formData.remotePreset.url}/master/preset.json`
+
+        const response = await fetch(url)
+        this.remotePresetValid = response.ok
+      }
     }
   }
 }

yarn.lock

@@ -7762,6 +7762,10 @@ lodash.create@3.1.1:
     lodash._basecreate "^3.0.0"
     lodash._isiterateecall "^3.0.0"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
 lodash.defaultsdeep@4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.3.2.tgz#6c1a586e6c5647b0e64e2d798141b8836158be8a"