chore(boxes): refactor npx to improve readability, added upgrade opti…

…on and manual versioning

boxes/bin.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+const program = new Command();
+import path from "path";
+import os from "os";
+import axios from "axios";
+import { chooseAndCloneBox } from "./scripts/steps/chooseBox.js";
+import { sandboxRun } from "./scripts/steps/sandbox/run.js";
+import { sandboxInstallOrUpdate } from "./scripts/steps/sandbox/install.js";
+
+const { GITHUB_TOKEN } = process.env;
+
+const axiosOpts = {};
+if (GITHUB_TOKEN) {
+  axiosOpts.headers = { Authorization: `token ${GITHUB_TOKEN}` };
+}
+
+const { data } = await axios.get(
+  `https://api.github.com/repos/AztecProtocol/aztec-packages/releases`,
+  axiosOpts,
+);
+
+// versioning is confusing here because "latest" and "master" point to the same thing at times
+// so let's clarify a bit:
+//
+// if the user has set a version (ex. "master" or "0.23.0"), use that
+// otherwise use the stable release (ex. 0.24.0)
+const stable = `${data[0].tag_name.split("-v")[1]}`;
+const version = process.env.VERSION || stable;
+
+// if the user has set a semver version (matches the regex), fetch that tag (i.e. aztec-packages-v0.23.0)
+// otherwise use the version as the tag
+const tag = version.match(/^\d+\.\d+\.\d+$/)
+  ? `aztec-packages-v${version}`
+  : version;
+
+program.action(async () => {
+  // STEP 1: Choose the boilerplate
+  await chooseAndCloneBox(tag, version);
+
+  // STEP 2: Install the Sandbox
+  await sandboxInstallOrUpdate(stable, version);
+
+  // STEP 3: Running the Sandbox
+  await sandboxRun(version);
+});
+
+program.parse();

boxes/package.json

@@ -1,17 +1,18 @@
 {
   "name": "create-aztec-app",
   "packageManager": "yarn@4.1.0",
-  "version": "0.1.1",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
     "compile": "yarn workspaces foreach -A -v run compile",
-    "build": "yarn workspaces foreach -A -v run build"
+    "build": "yarn workspaces foreach -A -v run build",
+    "publish": "yarn npm publish"
   },
   "workspaces": [
     "react",
     "vanilla-js"
   ],
-  "bin": "npx.js",
+  "bin": "VERSION=${VERSION:+} bin.js",
   "resolutions": {
     "@aztec/accounts": "portal:../yarn-project/accounts",
     "@aztec/aztec.js": "portal:../yarn-project/aztec.js",

boxes/scripts/steps/chooseBox.js

@@ -0,0 +1,49 @@
+import select from "@inquirer/select";
+import input from "@inquirer/input";
+import tiged from "tiged";
+import { replacePaths } from "../utils.js";
+import chalk from "chalk";
+const { log } = console;
+
+export async function chooseAndCloneBox(tag, version) {
+  const appType = await select({
+    message: "Please choose your Aztec boilerplate:",
+    choices: [
+      { value: "vanilla-js", name: "HTML/TS project" },
+      { value: "react", name: "React project" },
+      { value: "skip", name: "Skip this step" },
+    ],
+  });
+
+  if (appType === "skip") return;
+
+  log(chalk.yellow(`You chose: ${appType}`));
+
+  try {
+    // STEP 1: Clone the box
+    const appName = await input({
+      message: "Your app name:",
+      default: "my-aztec-app",
+    });
+
+    chalk.blue("Cloning the boilerplate code...");
+    const emitter = tiged(
+      // same as the nargo dependencies above:
+      // "master" and "latest" both mean "master" for the github repo
+      // but if the user has set a semver version, we want that tag (i.e. aztec-packages-v0.23.0)
+      `AztecProtocol/aztec-packages/boxes/${appType}${["latest", "master"].includes(tag) ? "" : `#${tag}`}`,
+    );
+
+    emitter.on("info", (info) => {
+      log(info.message);
+    });
+
+    await emitter.clone(`./${appName}`).then(() => {
+      replacePaths(`./${appName}`, tag, version);
+      log(chalk.bgGreen("Your code is ready!"));
+    });
+  } catch (error) {
+    log(chalk.bgRed(error.message));
+    process.exit(1);
+  }
+}