feat(cli) add ui:create:vue command (#6)

https://coveord.atlassian.net/browse/CDX-27

packages/cli/README.md

@@ -0,0 +1,91 @@
+@coveo/cli
+==========
+
+
+
+[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
+[![Version](https://img.shields.io/npm/v/@coveo/cli.svg)](https://npmjs.org/package/@coveo/cli)
+[![Codecov](https://codecov.io/gh/coveo/cli/branch/master/graph/badge.svg)](https://codecov.io/gh/coveo/cli)
+[![Downloads/week](https://img.shields.io/npm/dw/@coveo/cli.svg)](https://npmjs.org/package/@coveo/cli)
+[![License](https://img.shields.io/npm/l/@coveo/cli.svg)](https://github.com/coveo/cli/blob/master/package.json)
+
+<!-- toc -->
+* [Usage](#usage)
+* [Commands](#commands)
+<!-- tocstop -->
+# Usage
+<!-- usage -->
+```sh-session
+$ npm install -g @coveo/cli
+$ coveo COMMAND
+running command...
+$ coveo (-v|--version|version)
+@coveo/cli/0.0.0 darwin-x64 node-v14.15.4
+$ coveo --help [COMMAND]
+USAGE
+  $ coveo COMMAND
+...
+```
+<!-- usagestop -->
+# Commands
+<!-- commands -->
+* [`coveo hello [FILE]`](#coveo-hello-file)
+* [`coveo help [COMMAND]`](#coveo-help-command)
+* [`coveo ui:create:vue [FILE]`](#coveo-uicreatevue-file)
+
+## `coveo hello [FILE]`
+
+describe the command here
+
+```
+USAGE
+  $ coveo hello [FILE]
+
+ARGUMENTS
+  FILE  a dummy file
+
+OPTIONS
+  -f, --force
+  -h, --help       show CLI help
+  -n, --name=name  name to print
+
+EXAMPLE
+  $ coveo hello
+       hello world from ./src/hello.ts!
+```
+
+_See code: [src/commands/hello.ts](https://github.com/coveo/cli/blob/v0.0.0/src/commands/hello.ts)_
+
+## `coveo help [COMMAND]`
+
+display help for coveo
+
+```
+USAGE
+  $ coveo help [COMMAND]
+
+ARGUMENTS
+  COMMAND  command to show help for
+
+OPTIONS
+  --all  see all commands in CLI
+```
+
+_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v3.2.1/src/commands/help.ts)_
+
+## `coveo ui:create:vue [FILE]`
+
+describe the command here
+
+```
+USAGE
+  $ coveo ui:create:vue [FILE]
+
+OPTIONS
+  -f, --force
+  -h, --help       show CLI help
+  -n, --name=name  name to print
+```
+
+_See code: [src/commands/ui/create/vue.ts](https://github.com/coveo/cli/blob/v0.0.0/src/commands/ui/create/vue.ts)_
+<!-- commandsstop -->

packages/cli/package.json

@@ -8,9 +8,11 @@
     "@oclif/command": "^1",
     "@oclif/config": "^1",
     "@oclif/plugin-help": "^3",
+    "@vue/cli": "^4.5.11",
     "@openid/appauth": "^1.3.0",
     "axios": "^0.21.1",
     "exponential-backoff": "^3.1.0",
+    "vue-cli-plugin-coveo": "^0.0.0"
     "fs-extra": "^9.1.0",
     "keytar": "^7.3.0",
     "tslib": "^1"

packages/cli/src/commands/ui/create/presets/typescript-preset.json

@@ -0,0 +1,18 @@
+{
+    "useConfigFiles": true,
+    "plugins": {
+        "@vue/cli-plugin-babel": {},
+        "@vue/cli-plugin-typescript": {
+            "classComponent": true,
+            "useTsWithBabel": true
+        },
+        "@vue/cli-plugin-eslint": {
+            "config": "standard",
+            "lintOn": [
+                "save",
+                "commit"
+            ]
+        }
+    },
+    "vueVersion": "2"
+}

packages/cli/src/commands/ui/create/vue.ts

@@ -0,0 +1,85 @@
+import {Command, flags} from '@oclif/command';
+import {dirname, resolve} from 'path';
+import {spawnProcess} from '../../../lib/utils/process';
+
+export default class Vue extends Command {
+  static description = 'Create a new project powered by vue-cli-service';
+
+  static hidden = true;
+
+  static flags = {
+    help: flags.help({char: 'h'}),
+    preset: flags.string({
+      char: 'p',
+      helpValue: 'path',
+      description: [
+        'Path to a JSON file with pre-defined options and plugins for creating a new project.',
+        'If not specified, the default TypeScript preset will be taked',
+        'For more information about Vue CLI presets, please consult https://cli.vuejs.org/guide/plugins-and-presets.html#presets',
+      ].join('\n'),
+      default: resolve(__dirname, './presets/typescript-preset.json'),
+    }),
+  };
+
+  static examples = [
+    '$ coveo ui:create:vue --preset path/to/my/preset.json',
+    '$ coveo ui:create:vue --help',
+  ];
+
+  static args = [
+    {name: 'name', description: 'application name', required: true},
+  ];
+
+  async run() {
+    const {args, flags} = this.parse(Vue);
+
+    await this.createProject(args.name, require(flags.preset));
+    await this.installPlugin(args.name);
+    await this.invokePlugin(args.name);
+    this.startServer(args.name);
+  }
+
+  private installPlugin(applicationName: string) {
+    // TODO: DELETE THIS METHOD ONCE THE PLUGIN IS PUBLISHED AND PART OF THE PRESET
+    // Once the coveo plugin is published to npm, simply include it in the preset typescript-preset.json
+    // This will prevent from running `2 npm install` commands (one by @vue/cli, one for the plugin)
+    const pathToPlugin = dirname(require.resolve('vue-cli-plugin-coveo'));
+    return spawnProcess(
+      'npm',
+      ['install', '--save-dev', `file:${pathToPlugin}`],
+      {
+        cwd: applicationName,
+      }
+    );
+  }
+
+  private invokePlugin(applicationName: string) {
+    return this.runVueCliCommand(['invoke', 'vue-cli-plugin-coveo'], {
+      cwd: applicationName,
+    });
+  }
+
+  private startServer(applicationName: string) {
+    // TODO: DELETE THIS METHOD ONCE THE PLUGIN IS PUBLISHED AND PART OF THE PRESET
+    // The @vue/cli already logs instructions once the installation completes
+    this.log(`Successfully created project ${applicationName}.`);
+    this.log('Get started with the following commands:\n');
+
+    this.log('$ cd ${applicationName}');
+    this.log('$ yarn serve');
+  }
+
+  private createProject(name: string, preset: {}) {
+    return this.runVueCliCommand([
+      'create',
+      name,
+      '--inlinePreset',
+      JSON.stringify(preset),
+    ]);
+  }
+
+  private runVueCliCommand(args: string[], options = {}) {
+    const executable = require.resolve('@vue/cli/bin/vue.js');
+    return spawnProcess(executable, args, options);
+  }
+}

packages/cli/src/lib/utils/process.ts

@@ -0,0 +1,36 @@
+import {spawn, SpawnOptions} from 'child_process';
+
+/**
+ *
+ * @private
+ * @param {string} command The command to run
+ * @param {string[]} args List of string arguments
+ * @param {SpawnOptions} [options={}]
+ * @returns {Promise<number>} A promise of the the child process exit code
+ */
+export function spawnProcess(
+  command: string,
+  args: string[],
+  options: SpawnOptions = {}
+): Promise<number> {
+  return new Promise((resolve, reject) => {
+    spawn(command, args, {
+      stdio: ['inherit', 'inherit', 'inherit'],
+      ...options,
+    }).on('close', (code) => {
+      if (code !== 0) {
+        // TODO: inject logger decorator so this util method can log
+        // this.debug(
+        //   `Following command has failed: ${command} ${args.join(' ')}`
+        // );
+
+        // Any error message triggered by the execution of the subprocess will be
+        // displayed since the terminal is shared by both parent and child processes.
+        // So no need to bubble up the error.
+        reject(code);
+      } else {
+        resolve(0);
+      }
+    });
+  });
+}