feat(ui): hooks

Author: Guillaume Chau

docs/plugin-dev-ui.md

@@ -10,6 +10,7 @@ This guide will walk you through the development of cli-ui specific features for
 - [Shared data](#shared-data)
 - [Plugin actions](#plugin-actions)
 - [IPC](#ipc)
+- [Hooks](#hooks)
 - [Public static files](#public-static-files)
 
 ## Plugin Info
@@ -630,6 +631,26 @@ api.ipcSend({
 })
 ```
 
+### Hooks
+
+Hooks allows to react to certain cli-ui events.
+
+`onProjectOpen`: Called when the plugin is loaded for the first time for the current project.
+
+```js
+api.onProjectOpen((project, previousProject) => {
+  // Reset data
+})
+```
+
+`onPluginReload`: Called when the plugin is reloaded.
+
+```js
+api.onPluginReload((project) => {
+  console.log('plugin reloaded')
+})
+```
+
 ### Public static files
 
 You may need to expose some static files over the cli-ui builtin HTTP server (typically if you want to specify an icon to a custom view).

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

@@ -23,11 +23,11 @@ module.exports = api => {
   }
 
   // Init data
-  if (typeof getSharedData('serve-status') === 'undefined') {
+  api.onProjectOpen(() => {
     for (const key of ['serve', 'build']) {
       resetSharedData(key)
     }
-  }
+  })
 
   // Tasks
   const views = {

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

@@ -15,6 +15,10 @@ class PluginApi {
     // Context
     this.context = context
     this.pluginId = null
+    this.project = null
+    // Hooks
+    this.projectOpenHooks = []
+    this.pluginReloadHooks = []
     // Data
     this.configurations = []
     this.tasks = []
@@ -23,6 +27,28 @@ class PluginApi {
     this.actions = new Map()
   }
 
+  /**
+   * Register an handler called when the project is open (only if this plugin is loaded).
+   *
+   * @param {function} cb Handler
+   */
+  onProjectOpen (cb) {
+    if (this.project) {
+      cb(this.project)
+      return
+    }
+    this.projectOpenHooks.push(cb)
+  }
+
+  /**
+   * Register an handler called when the plugin is reloaded.
+   *
+   * @param {function} cb Handler
+   */
+  onPluginReload (cb) {
+    this.pluginReloadHooks.push(cb)
+  }
+
   /**
    * Describe a project configuration (usually for config file like `.eslintrc.json`).
    *

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

@@ -24,6 +24,7 @@ const cwd = require('./cwd')
 const folders = require('./folders')
 const prompts = require('./prompts')
 const progress = require('./progress')
+const projects = require('./projects')
 const logs = require('./logs')
 const clientAddons = require('./client-addons')
 const views = require('./views')
@@ -50,6 +51,7 @@ let eventsInstalled = false
 let plugins = []
 let pluginApi
 let installationStep
+let projectId
 
 function getPath (id) {
   return path.dirname(resolveModule(id, cwd.get()))
@@ -93,6 +95,16 @@ function resetPluginApi (context) {
   pluginApi.clientAddons.forEach(options => clientAddons.add(options, context))
   // Add views
   pluginApi.views.forEach(view => views.add(view, context))
+
+  const project = projects.getCurrent(context)
+  if (!project) return
+  if (projectId !== project.id) {
+    projectId = project.id
+    pluginApi.projectOpenHooks.forEach(fn => fn(project, projects.getLast(context)))
+    pluginApi.project = project
+  } else {
+    pluginApi.pluginReloadHooks.forEach(fn => fn(project))
+  }
 }
 
 function runPluginApi (id, context, fileName = 'ui') {
@@ -306,6 +318,7 @@ function update (id, context) {
     const plugin = findOne(id, context)
     const { current, wanted } = await getVersion(plugin, context)
     await updatePackage(cwd.get(), getCommand(), null, id)
+    resetPluginApi(context)
     logs.add({
       message: `Plugin ${id} updated from ${current} to ${wanted}`,
       type: 'info'

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

@@ -19,6 +19,7 @@ const getContext = require('../context')
 
 const PROGRESS_ID = 'project-create'
 
+let lastProject = null
 let currentProject = null
 let creator = null
 let presets = []
@@ -35,6 +36,10 @@ function getCurrent (context) {
   return currentProject
 }
 
+function getLast (context) {
+  return lastProject
+}
+
 function generatePresetDescription (preset) {
   let description = `Features: ${preset.features.join(', ')}`
   if (preset.raw.useConfigFiles) {
@@ -308,6 +313,7 @@ async function open (id, context) {
     return null
   }
 
+  lastProject = currentProject
   currentProject = project
   cwd.set(project.path, context)
   // Load plugins
@@ -354,6 +360,7 @@ function setFavorite ({ id, favorite }, context) {
 module.exports = {
   list,
   getCurrent,
+  getLast,
   getCreation,
   applyPreset,
   setFeatureEnabled,