Customize destination directory and use global vue/angular when possi…

…ble. Resolves single-spa#56 (single-spa#76)

* Customize destination directory and use global vue/angular when possible. Resolves single-spa#56.

* Interactive choosing of destination dir

* Carlos' feedback

* Self review

README.md

@@ -12,9 +12,9 @@ We're using [lerna](https://lerna.js.org/).
 
 1. `yarn install`
 2. `yarn bootstrap`
-3. `node packages/create-single-spa/bin/create-single-spa.js`
+3. `node packages/create-single-spa/bin/create-single-spa.js ../some-test-dir`
 
-Note that create-single-spa **runs in the current directory**. For development purposes, you may want to create a test directory outside of the create-single-spa folder to run it on. There is no compilation / build step.
+Note that create-single-spa can run in the current directory by default, but you can provide a different destination directory through the CLI (as shown above with `some-test-dir`).
 
 ### Tests
 

packages/create-single-spa/bin/create-single-spa.js

@@ -5,4 +5,4 @@ const argv = require("yargs").argv;
 
 const env = yeoman.createEnv();
 env.registerStub(require("generator-single-spa"), "single-spa");
-env.run("single-spa", argv);
+env.run(`single-spa ${argv._.join(" ")}`, argv);

packages/generator-single-spa/package.json

@@ -14,6 +14,7 @@
   "main": "src/generator-single-spa.js",
   "license": "MIT",
   "dependencies": {
+    "command-exists": "^1.2.8",
     "yeoman-generator": "^4.2.0"
   },
   "devDependencies": {

packages/generator-single-spa/src/angular/generator-single-spa-angular.js

@@ -1,9 +1,25 @@
 const Generator = require("yeoman-generator");
 const { spawn } = require("child_process");
+const util = require("util");
+const commandExists = util.promisify(require("command-exists"));
 
 module.exports = class SingleSpaAngularGenerator extends Generator {
   async runAngularCli() {
-    const npxCmd = process.platform === "win32" ? "npx.cmd" : "npx";
-    spawn(npxCmd, ["@angular/cli", "new"], { stdio: "inherit" });
+    const globalInstallation = await commandExists("ng");
+
+    let command,
+      args = [];
+    if (globalInstallation) {
+      command = "ng";
+    } else {
+      command = process.platform === "win32" ? "npx.cmd" : "npx";
+      args.push("@angular/cli");
+    }
+
+    spawn(
+      command,
+      args.concat(["new", "--directory", this.options.dir || "."]),
+      { stdio: "inherit" }
+    );
   }
 };

packages/generator-single-spa/src/generator-single-spa.js

@@ -1,3 +1,4 @@
+const path = require("path");
 const Generator = require("yeoman-generator");
 const SingleSpaReactGenerator = require("./react/generator-single-spa-react");
 const SingleSpaRootConfigGenerator = require("./root-config/generator-root-config");
@@ -9,13 +10,35 @@ module.exports = class SingleSpaGenerator extends Generator {
   constructor(args, opts) {
     super(args, opts);
 
+    this.option("dir", {
+      type: String,
+    });
+
     this.option("framework", {
       type: String,
     });
 
     this.option("moduleType", {
       type: String,
     });
+
+    if (args.length > 0 && !this.options.dir) {
+      this.options.dir = args[0];
+    }
+  }
+  async chooseDestinationDir() {
+    if (!this.options.dir) {
+      const response = await this.prompt([
+        {
+          type: "input",
+          name: "dir",
+          message: "Directory for new project",
+          default: ".",
+        },
+      ]);
+
+      this.options.dir = response.dir;
+    }
   }
   async composeChildGenerator() {
     let moduleType = this.options.moduleType;
@@ -45,6 +68,8 @@ module.exports = class SingleSpaGenerator extends Generator {
     }
 
     if (moduleType === "root-config") {
+      this._setDestinationDir();
+
       this.composeWith(
         {
           Generator: SingleSpaRootConfigGenerator,
@@ -55,16 +80,29 @@ module.exports = class SingleSpaGenerator extends Generator {
     } else if (moduleType === "app-parcel") {
       await runFrameworkGenerator.call(this);
     } else if (moduleType === "util-module") {
-      this.composeWith({
-        Generator: SingleSpaUtilModuleGenerator,
-        path: require.resolve(
-          "./util-module/generator-single-spa-util-module.js"
-        ),
-      });
+      this._setDestinationDir();
+
+      this.composeWith(
+        {
+          Generator: SingleSpaUtilModuleGenerator,
+          path: require.resolve(
+            "./util-module/generator-single-spa-util-module.js"
+          ),
+        },
+        this.options
+      );
     } else {
       throw Error(`unknown moduleType option ${moduleType}`);
     }
   }
+  _setDestinationDir() {
+    if (this.options.dir) {
+      const root = path.isAbsolute(this.options.dir)
+        ? this.options.dir
+        : path.resolve(process.cwd(), this.options.dir);
+      this.destinationRoot(root);
+    }
+  }
 };
 
 async function runFrameworkGenerator() {
@@ -83,6 +121,8 @@ async function runFrameworkGenerator() {
 
   switch (this.options.framework) {
     case "react":
+      this._setDestinationDir();
+
       this.composeWith(
         {
           Generator: SingleSpaReactGenerator,
@@ -92,16 +132,22 @@ async function runFrameworkGenerator() {
       );
       break;
     case "vue":
-      this.composeWith({
-        Generator: SingleSpaVueGenerator,
-        path: require.resolve("./vue/generator-single-spa-vue.js"),
-      });
+      this.composeWith(
+        {
+          Generator: SingleSpaVueGenerator,
+          path: require.resolve("./vue/generator-single-spa-vue.js"),
+        },
+        this.options
+      );
       break;
     case "angular":
-      this.composeWith({
-        Generator: SingleSpaAngularGenerator,
-        path: require.resolve("./angular/generator-single-spa-angular.js"),
-      });
+      this.composeWith(
+        {
+          Generator: SingleSpaAngularGenerator,
+          path: require.resolve("./angular/generator-single-spa-angular.js"),
+        },
+        this.options
+      );
       break;
     case "other":
       console.log(

packages/generator-single-spa/src/vue/generator-single-spa-vue.js

@@ -1,9 +1,23 @@
 const Generator = require("yeoman-generator");
 const { spawn } = require("child_process");
+const util = require("util");
+const commandExists = util.promisify(require("command-exists"));
 
 module.exports = class SingleSpaVueGenerator extends Generator {
   async runVueCli() {
-    const npxCmd = process.platform === "win32" ? "npx.cmd" : "npx";
-    spawn(npxCmd, ["@vue/cli", "create", "."], { stdio: "inherit" });
+    const globalInstallation = await commandExists("vue");
+
+    let command,
+      args = [];
+    if (globalInstallation) {
+      command = "vue";
+    } else {
+      command = process.platform === "win32" ? "npx.cmd" : "npx";
+      args.push("@vue/cli");
+    }
+
+    spawn(command, args.concat(["create", this.options.dir || "."]), {
+      stdio: "inherit",
+    });
   }
 };

packages/generator-single-spa/yarn.lock

@@ -970,6 +970,11 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+command-exists@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/command-exists/-/command-exists-1.2.8.tgz#715acefdd1223b9c9b37110a149c6392c2852291"
+  integrity sha512-PM54PkseWbiiD/mMsbvW351/u+dafwTJ0ye2qB60G1aGQP9j3xK2gmMDc+R34L3nDtx4qMCitXT75mkbkGJDLw==
+
 commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"