feat(ui): task run (wip stop not working)

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

@@ -20,6 +20,8 @@
 </template>
 
 <script>
+import { isSameRoute, isIncludedRoute } from '../util/route'
+
 const BUILTIN_ROUTES = [
   {
     name: 'project-plugins',
@@ -52,14 +54,14 @@ export default {
   computed: {
     currentRoute: {
       get () {
-        const currentRoute = this.$route.name
+        const currentRoute = this.$route
         const route = this.routes.find(
-          r => currentRoute.indexOf(r.name) === 0
+          item => isIncludedRoute(currentRoute, this.$router.resolve({ name: item.name }).route)
         )
-        return route ? route.name : null
+        return route && route.name
       },
       set (name) {
-        if (this.$route.name !== name) {
+        if (!isSameRoute(this.$route, this.$router.resolve({ name }).route)) {
           this.$router.push({ name })
         }
       }

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

@@ -2,5 +2,7 @@ module.exports = {
   CWD_CHANGED: 'cwd_changed',
   PROGRESS_CHANGED: 'progress_changed',
   PROGRESS_REMOVED: 'progress_removed',
-  CONSOLE_LOG_ADDED: 'console_log_added'
+  CONSOLE_LOG_ADDED: 'console_log_added',
+  TASK_CHANGED: 'task_changed',
+  TASK_LOG_ADDED: 'task_log_added'
 }

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

@@ -5,8 +5,7 @@ const semver = require('semver')
 const {
   isPlugin,
   isOfficialPlugin,
-  getPluginLink,
-  hasYarn
+  getPluginLink
 } = require('@vue/cli-shared-utils')
 const getPackageVersion = require('@vue/cli/lib/util/getPackageVersion')
 const {
@@ -15,7 +14,6 @@ const {
   uninstallPackage,
   updatePackage
 } = require('@vue/cli/lib/util/installDeps')
-const { loadOptions } = require('@vue/cli/lib/options')
 const invoke = require('@vue/cli/lib/invoke')
 
 const cwd = require('./cwd')
@@ -24,6 +22,8 @@ const prompts = require('./prompts')
 const progress = require('./progress')
 const logs = require('./logs')
 
+const { getCommand } = require('../utils/command')
+
 const metadataCache = new LRU({
   max: 200,
   maxAge: 1000 * 60 * 30
@@ -178,8 +178,7 @@ function install (id, context) {
 
     currentPluginId = id
 
-    const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
-    await installPackage(cwd.get(), packageManager, null, id)
+    await installPackage(cwd.get(), getCommand(), null, id)
 
     await initPrompts(id, context)
 
@@ -196,8 +195,7 @@ function uninstall (id, context) {
 
     currentPluginId = id
 
-    const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
-    await uninstallPackage(cwd.get(), packageManager, null, id)
+    await uninstallPackage(cwd.get(), getCommand(), null, id)
 
     currentPluginId = null
 
@@ -248,8 +246,7 @@ function update (id, context) {
     const plugin = findOne(id, context)
     const { current, wanted } = await getVersion(plugin, context)
 
-    const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
-    await updatePackage(cwd.get(), packageManager, null, id)
+    await updatePackage(cwd.get(), getCommand(), null, id)
 
     logs.add({
       message: `Plugin ${id} updated from ${current} to ${wanted}`,

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

@@ -1,32 +1,176 @@
+const execa = require('execa')
+
+const channels = require('../channels')
 const cwd = require('./cwd')
 const folders = require('./folders')
+const logs = require('./logs')
+
+const { getCommand } = require('../utils/command')
 
-let tasks = []
+const tasks = new Map()
+
+function getTasks () {
+  const file = cwd.get()
+  let list = tasks.get(file)
+  if (!list) {
+    list = []
+    tasks.set(file, list)
+  }
+  return list
+}
 
 function list (context) {
+  let list = getTasks()
   const file = cwd.get()
   const pkg = folders.readPackage(file, context)
-  tasks = []
   if (pkg.scripts) {
-    tasks = Object.keys(pkg.scripts).map(
-      name => ({
-        id: `${file}:${name}`,
-        name,
-        command: pkg.scripts[name],
-        status: 'idle'
+    const existing = new Map()
+
+    // Get current valid tasks in project `package.json`
+    const currentTasks = Object.keys(pkg.scripts).map(
+      name => {
+        const id = `${file}:${name}`
+        existing.set(id, true)
+        return {
+          id,
+          name,
+          command: pkg.scripts[name],
+          index: list.findIndex(t => t.id === id)
+        }
+      }
+    )
+
+    // Process existing tasks
+    const existingTasks = currentTasks.filter(
+      task => task.index !== -1
+    )
+    // Update tasks data
+    existingTasks.forEach(task => {
+      Object.assign(list[task.index], task)
+    })
+
+    // Process new tasks
+    const newTasks = currentTasks.filter(
+      task => task.index === -1
+    ).map(
+      task => ({
+        ...task,
+        status: 'idle',
+        child: null,
+        logs: []
       })
     )
+
+    // Keep existing or ran tasks
+    list = list.filter(
+      task => existing.get(task.id) ||
+      task.status !== 'idle'
+    )
+
+    // Add the new tasks
+    list = list.concat(newTasks)
+
+    tasks.set(file, list)
   }
-  return tasks
+  return list
 }
 
 function findOne (id, context) {
-  return tasks.find(
+  return getTasks().find(
     t => t.id === id
   )
 }
 
+function updateOne (data, context) {
+  const task = findOne(data.id)
+  if (task) {
+    Object.assign(task, data)
+    context.pubsub.publish(channels.TASK_CHANGED, {
+      taskChanged: task
+    })
+  }
+  return task
+}
+
+function run (id, context) {
+  const task = findOne(id, context)
+  if (task && task.status !== 'running') {
+    const args = ['run', task.name]
+
+    const child = execa(getCommand(), args, {
+      cwd: cwd.get(),
+      stdio: ['inherit', 'pipe', 'pipe']
+    })
+
+    updateOne({
+      id: task.id,
+      status: 'running',
+      child
+    }, context)
+    logs.add({
+      message: `Task ${task.id} started`,
+      type: 'info'
+    }, context)
+
+    child.stdout.on('data', buffer => {
+      // TODO logs
+      console.log(buffer.toString())
+    })
+
+    child.stderr.on('data', buffer => {
+      // TODO logs
+      console.log(buffer.toString())
+    })
+
+    child.on('close', (code, signal) => {
+      if (signal === 'SIGINT') {
+        updateOne({
+          id: task.id,
+          status: 'error',
+          child: null
+        }, context)
+        logs.add({
+          message: `Task ${task.id} was terminated`,
+          type: 'error'
+        }, context)
+      } else if (code !== 0) {
+        updateOne({
+          id: task.id,
+          status: 'error',
+          child: null
+        }, context)
+        logs.add({
+          message: `Task ${task.id} ended with error code`,
+          type: 'error'
+        }, context)
+      } else {
+        updateOne({
+          id: task.id,
+          status: 'done',
+          child: null
+        }, context)
+        logs.add({
+          message: `Task ${task.id} completed`,
+          type: 'done'
+        }, context)
+      }
+    })
+  }
+  return task
+}
+
+function stop (id, context) {
+  const task = findOne(id, context)
+  if (task && task.status === 'running') {
+    task.child.kill('SIGINT') // TODO not working
+  }
+  return task
+}
+
 module.exports = {
   list,
-  findOne
+  findOne,
+  run,
+  stop,
+  updateOne
 }

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

@@ -70,7 +70,9 @@ module.exports = {
     pluginInstall: (root, { id }, context) => plugins.install(id, context),
     pluginUninstall: (root, { id }, context) => plugins.uninstall(id, context),
     pluginInvoke: (root, { id }, context) => plugins.runInvoke(id, context),
-    pluginUpdate: (root, { id }, context) => plugins.update(id, context)
+    pluginUpdate: (root, { id }, context) => plugins.update(id, context),
+    taskRun: (root, { id }, context) => tasks.run(id, context),
+    taskStop: (root, { id }, context) => tasks.stop(id, context)
   },
 
   Subscription: {
@@ -98,6 +100,9 @@ module.exports = {
         logs.init(context)
         return context.pubsub.asyncIterator(channels.CONSOLE_LOG_ADDED)
       }
+    },
+    taskChanged: {
+      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.TASK_CHANGED)
     }
   }
 }

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

@@ -203,12 +203,15 @@ type Mutation {
   pluginUninstall (id: ID!): PluginInstallation
   pluginInvoke (id: ID!): PluginInstallation
   pluginUpdate (id: ID!): Plugin
+  taskRun (id: ID!): Task
+  taskStop (id: ID!): Task
 }
 
 type Subscription {
   progressChanged (id: ID!): Progress
   progressRemoved (id: ID!): ID
   consoleLogAdded: ConsoleLog!
   cwdChanged: String!
+  taskChanged: Task
 }
 `

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

@@ -0,0 +1,8 @@
+const {
+  hasYarn
+} = require('@vue/cli-shared-utils')
+const { loadOptions } = require('@vue/cli/lib/options')
+
+exports.getCommand = function () {
+  return loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
+}

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

@@ -0,0 +1,7 @@
+#import "./taskFragment.gql"
+
+subscription taskChanged {
+  taskChanged {
+    ...task
+  }
+}

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

@@ -0,0 +1,7 @@
+#import "./taskFragment.gql"
+
+mutation taskRun ($id: ID!) {
+  taskRun (id: $id) {
+    ...task
+  }
+}

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

@@ -0,0 +1,7 @@
+#import "./taskFragment.gql"
+
+mutation taskStop ($id: ID!) {
+  taskStop (id: $id) {
+    ...task
+  }
+}

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

@@ -234,6 +234,13 @@
     },
     "project-tasks": {
       "title": "Project tasks"
+    },
+    "project-task-details": {
+      "actions": {
+        "play": "Run task",
+        "stop": "Stop task"
+      },
+      "command": "Script command"
     }
   }
 }

packages/@vue/cli-ui/src/locales/fr.json

@@ -70,7 +70,7 @@
       },
       "log": {
         "tooltip": "Journal<br><i>Cliquer pour Afficher/Masquer le Journal Vue CLI</i>",
-        "empty": "Aucun entrée dans le journal"
+        "empty": "Aucune entrée dans le journal"
       }
     }
   },
@@ -234,6 +234,13 @@
     },
     "project-tasks": {
       "title": "Tâches du projet"
+    },
+    "project-task-details": {
+      "actions": {
+        "play": "Lancer la tâche",
+        "stop": "Arrêter la tâche"
+      },
+      "command": "Commande de script"
     }
   }
 }

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

@@ -2,6 +2,7 @@
   <div class="project-configuration page">
     <ContentView
       :title="$t('views.project-configuration.title')"
+      class="limit-width"
     >
       WIP
     </ContentView>