refactor(ui): use package.json 'vuePlugins.ui' option

Guillaume Chau · Guillaume Chau · commit eda4ce883995 · 2018-07-13T18:06:37.000+02:00
diff --git a/docs/dev-guide/ui-api.md b/docs/dev-guide/ui-api.md
@@ -6,7 +6,7 @@ The cli-ui exposes an API that allows augmenting the project configurations and
 
 ## UI files
 
-Inside each installed vue-cli plugins, the cli-ui will try to load an optional `ui.js` file in the root folder of the plugin. It will also try to load a `vue-cli-ui.js` file in the user project root so the UI can be manually extended on a per-project basis (also useful to quickly prototype a plugin). Note that you can also use folders (for example `ui/index.js`).
+Inside each installed vue-cli plugins, the cli-ui will try to load an optional `ui.js` file in the root folder of the plugin. Note that you can also use folders (for example `ui/index.js`).
 
 The file should export a function which gets the api object as argument:
 
@@ -30,6 +30,20 @@ Here is an example folder structure for a vue-cli plugin using the UI API:
   - logo.png
 ```
 
+### Project local plugins
+
+If you need access to the plugin API in your project and don't want to create a full plugin for it, you can use the `vuePlugins.ui` option in your `package.json` file:
+
+```json
+{
+  "vuePlugins": {
+    "ui": ["my-ui.js"]
+  }
+}
+```
+
+Each file will need to export a function taking the plugin API as the first argument.
+
 ## Dev mode
 
 While building your plugin, you may want to run the cli-ui in Dev mode, so it will output useful logs to you:
diff --git a/docs/guide/plugins-and-presets.md b/docs/guide/plugins-and-presets.md
@@ -89,7 +89,17 @@ If you need access to the plugin API in your project and don't want to create a
 
 Each file will need to export a function taking the plugin API as the first argument. For more information about the plugin API, check out the [Plugin Development Guide](../dev-guide/plugin-dev.md).
 
-You can also create a `vue-cli-ui.js` file that will behave like a UI plugin. For more information, read the [UI Plugin API](../dev-guide/ui-api.md).
+You can also add files that will behave like UI plugins with the `vuePlugins.ui` option:
+
+```json
+{
+  "vuePlugins": {
+    "ui": ["my-ui.js"]
+  }
+}
+```
+
+For more information, read the [UI Plugin API](../dev-guide/ui-api.md).
 
 ## Presets
 
diff --git a/packages/@vue/cli-ui/apollo-server/connectors/plugins.js b/packages/@vue/cli-ui/apollo-server/connectors/plugins.js
@@ -55,9 +55,18 @@ let eventsInstalled = false
 let installationStep
 let pluginsStore = new Map()
 let pluginApiInstances = new Map()
+let pkgStore = new Map()
 
 async function list (file, context, { resetApi = true, lightApi = false, autoLoadApi = true } = {}) {
-  const pkg = folders.readPackage(file, context)
+  let pkg = folders.readPackage(file, context)
+  let pkgContext = cwd.get()
+  // Custom package.json location
+  if (pkg.vuePlugins && pkg.vuePlugins.resolveFrom) {
+    pkgContext = path.resolve(cwd.get(), pkg.vuePlugins.resolveFrom)
+    pkg = folders.readPackage(pkgContext, context)
+  }
+  pkgStore.set(file, { pkgContext, pkg })
+
   let plugins = []
   plugins = plugins.concat(findPlugins(pkg.devDependencies || {}, file))
   plugins = plugins.concat(findPlugins(pkg.dependencies || {}, file))
@@ -156,7 +165,16 @@ function resetPluginApi ({ file, lightApi }, context) {
       // Run Plugin API
       runPluginApi(path.resolve(__dirname, '../../'), pluginApi, context, 'ui-defaults')
       plugins.forEach(plugin => runPluginApi(plugin.id, pluginApi, context))
-      runPluginApi(cwd.get(), pluginApi, context, 'vue-cli-ui')
+      // Local plugins
+      const { pkg, pkgContext } = pkgStore.get(file)
+      if (pkg.vuePlugins && pkg.vuePlugins.ui) {
+        const files = pkg.vuePlugins.ui
+        if (Array.isArray(files)) {
+          for (const file of files) {
+            runPluginApi(pkgContext, pluginApi, context, file)
+          }
+        }
+      }
       // Add client addons
       pluginApi.clientAddons.forEach(options => clientAddons.add(options, context))
       // Add views
@@ -190,20 +208,25 @@ function resetPluginApi ({ file, lightApi }, context) {
   })
 }
 
-function runPluginApi (id, pluginApi, context, fileName = 'ui') {
+function runPluginApi (id, pluginApi, context, filename = 'ui') {
   let module
   try {
-    module = loadModule(`${id}/${fileName}`, pluginApi.cwd, true)
+    module = loadModule(`${id}/${filename}`, pluginApi.cwd, true)
   } catch (e) {
     if (process.env.VUE_CLI_DEBUG) {
       console.error(e)
     }
   }
   if (module) {
-    pluginApi.pluginId = id
-    module(pluginApi)
-    log('Plugin API loaded for', id, chalk.grey(pluginApi.cwd))
-    pluginApi.pluginId = null
+    if (typeof module !== 'function') {
+      log(`${chalk.red('ERROR')} while loading plugin API: no function exported, for`, filename !== 'ui' ? `${id}/${filename}` : id, chalk.grey(pluginApi.cwd))
+    } else {
+      const name = filename !== 'ui' ? `${id}/${filename}` : id
+      log('Plugin API loaded for', name, chalk.grey(pluginApi.cwd))
+      pluginApi.pluginId = id
+      module(pluginApi)
+      pluginApi.pluginId = null
+    }
   }
 
   // Locales
diff --git a/packages/@vue/cli-ui/package.json b/packages/@vue/cli-ui/package.json
@@ -110,5 +110,8 @@
       "vue-cli-service lint",
       "git add"
     ]
+  },
+  "vuePlugins": {
+    "ui": ["ui-dev.js"]
   }
 }
diff --git a/packages/@vue/cli-ui/ui-dev.js b/packages/@vue/cli-ui/ui-dev.js

Original file line number	Diff line number	Diff line change
`@@ -110,5 +110,8 @@`
`110`	`110`	`"vue-cli-service lint",`
`111`	`111`	`"git add"`
`112`	`112`	`]`
	`113`	`+ },`
	`114`	`+ "vuePlugins": {`
	`115`	`+ "ui": ["ui-dev.js"]`
`113`	`116`	`}`
`114`	`117`	`}`