create-izi-noir 0.2.0 → 0.2.2

package/dist/index.js

@@ -6,7 +6,7 @@ import { Command } from "commander";
 // src/commands/init.ts
 import path2 from "path";
 import { execSync } from "child_process";
-import pc3 from "picocolors";
+import pc4 from "picocolors";
 
 // src/prompts/project.ts
 import prompts from "prompts";
@@ -153,6 +153,149 @@ function createSpinner(message) {
   return new Spinner(message);
 }
 
+// src/utils/progress.ts
+import pc3 from "picocolors";
+var THINKING_PHRASES = [
+  "Initializing ZK environment",
+  "Configuring proof system",
+  "Setting up circuit compiler",
+  "Preparing cryptographic primitives",
+  "Generating project scaffold",
+  "Configuring Noir integration",
+  "Setting up React components",
+  "Preparing WASM bindings"
+];
+var FILE_ICONS = {
+  ".json": "\u{1F4E6}",
+  ".ts": "\u{1F4DC}",
+  ".tsx": "\u269B\uFE0F",
+  ".css": "\u{1F3A8}",
+  ".html": "\u{1F310}",
+  ".md": "\u{1F4DD}",
+  ".svg": "\u{1F5BC}\uFE0F",
+  default: "\u{1F4C4}"
+};
+function getFileIcon(filename) {
+  const ext = filename.slice(filename.lastIndexOf("."));
+  return FILE_ICONS[ext] || FILE_ICONS.default;
+}
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+var ProgressReporter = class {
+  currentLine = "";
+  thinkingIndex = 0;
+  thinkingInterval = null;
+  async startThinking() {
+    process.stdout.write("\x1B[?25l");
+    this.showThinking();
+  }
+  showThinking() {
+    const frames2 = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+    let frameIndex = 0;
+    let dotCount = 0;
+    this.thinkingInterval = setInterval(() => {
+      const frame = pc3.cyan(frames2[frameIndex]);
+      const phrase = THINKING_PHRASES[this.thinkingIndex % THINKING_PHRASES.length];
+      const dots = ".".repeat(dotCount % 4);
+      process.stdout.write(`\r${frame} ${pc3.dim(phrase)}${dots}   `);
+      frameIndex = (frameIndex + 1) % frames2.length;
+      dotCount++;
+      if (dotCount % 12 === 0) {
+        this.thinkingIndex++;
+      }
+    }, 80);
+  }
+  stopThinking() {
+    if (this.thinkingInterval) {
+      clearInterval(this.thinkingInterval);
+      this.thinkingInterval = null;
+    }
+    process.stdout.write("\r\x1B[K");
+  }
+  async reportFile(filename, isLast = false) {
+    const icon = getFileIcon(filename);
+    const line = `  ${icon} ${pc3.dim("created")} ${pc3.white(filename)}`;
+    process.stdout.write("  " + icon + " " + pc3.dim("created") + " ");
+    for (const char of filename) {
+      process.stdout.write(pc3.white(char));
+      await sleep(8 + Math.random() * 12);
+    }
+    process.stdout.write("\n");
+    this.currentLine = line;
+  }
+  async reportDirectory(dirname) {
+    process.stdout.write(`  \u{1F4C1} ${pc3.dim("mkdir")}   ${pc3.blue(dirname)}/
+`);
+    await sleep(30);
+  }
+  showSuccess(message) {
+    process.stdout.write("\x1B[?25h");
+    console.log();
+    console.log(pc3.green("\u2713") + " " + message);
+  }
+  showError(message) {
+    process.stdout.write("\x1B[?25h");
+    console.log();
+    console.log(pc3.red("\u2717") + " " + message);
+  }
+};
+function createProgressReporter() {
+  return new ProgressReporter();
+}
+var InstallProgress = class {
+  interval = null;
+  progress = 0;
+  packages = [
+    "react",
+    "react-dom",
+    "vite",
+    "@izi-noir/sdk",
+    "@noir-lang/acvm_js",
+    "@noir-lang/noirc_abi",
+    "prism-react-renderer",
+    "typescript"
+  ];
+  currentPackage = 0;
+  start() {
+    process.stdout.write("\x1B[?25l");
+    const barWidth = 30;
+    const frames2 = ["\u25D0", "\u25D3", "\u25D1", "\u25D2"];
+    let frameIndex = 0;
+    this.interval = setInterval(() => {
+      const frame = pc3.cyan(frames2[frameIndex]);
+      const filled = Math.floor(this.progress / 100 * barWidth);
+      const empty = barWidth - filled;
+      const bar = pc3.green("\u2588".repeat(filled)) + pc3.dim("\u2591".repeat(empty));
+      const pkg = this.packages[this.currentPackage % this.packages.length];
+      process.stdout.write(
+        `\r${frame} Installing dependencies ${bar} ${pc3.dim(pkg)}   `
+      );
+      frameIndex = (frameIndex + 1) % frames2.length;
+      if (this.progress < 95) {
+        this.progress += Math.random() * 3;
+        if (this.progress > (this.currentPackage + 1) * 12) {
+          this.currentPackage++;
+        }
+      }
+    }, 100);
+  }
+  stop(success = true) {
+    if (this.interval) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+    process.stdout.write("\x1B[?25h");
+    process.stdout.write("\r\x1B[K");
+    const icon = success ? pc3.green("\u2713") : pc3.red("\u2717");
+    const message = success ? "Dependencies installed" : "Failed to install dependencies";
+    console.log(`${icon} ${message}`);
+  }
+};
+function createInstallProgress() {
+  return new InstallProgress();
+}
+
 // src/generators/package-json.ts
 function generatePackageJson(options) {
   const isSolana = options.provider === "arkworks";
@@ -162,7 +305,9 @@ function generatePackageJson(options) {
     "@noir-lang/noirc_abi": "1.0.0-beta.13-1d260df.nightly",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "prism-react-renderer": "^2.4.1"
+    "prism-react-renderer": "^2.4.1",
+    "buffer": "^6.0.3",
+    "util": "^0.12.5"
   };
   if (isSolana) {
     dependencies["@solana/wallet-adapter-react"] = "^0.15.0";
@@ -449,6 +594,7 @@ export default defineConfig({
     alias: {
       "@": path.resolve(__dirname, "./src"),
       buffer: "buffer/",
+      util: "util/",
     },
   },
   define: {
@@ -456,7 +602,7 @@ export default defineConfig({
   },
   optimizeDeps: {
     exclude: ["@noir-lang/noir_wasm", "@aztec/bb.js", "@izi-noir/sdk"],
-    include: ["buffer"],
+    include: ["buffer", "util"],
   },
   build: {
     rollupOptions: {
@@ -1410,28 +1556,31 @@ async function initCommand(projectName, options) {
     });
   }
   if (!projectOptions) {
-    console.log(pc3.yellow("\nOperation cancelled."));
+    console.log(pc4.yellow("\nOperation cancelled."));
     process.exit(0);
   }
   const projectDir = path2.resolve(process.cwd(), projectOptions.projectName);
   if (await directoryExists(projectDir)) {
     if (!await isDirectoryEmpty(projectDir)) {
       console.log(
-        pc3.red(`
+        pc4.red(`
 Error: Directory "${projectOptions.projectName}" already exists and is not empty.`)
       );
       process.exit(1);
     }
   }
   console.log();
-  const spinner = createSpinner("Creating project structure...");
-  spinner.start();
+  const progress = createProgressReporter();
   try {
-    await createProjectStructure(projectDir, projectOptions);
-    spinner.stop(true);
+    await progress.startThinking();
+    await new Promise((r) => setTimeout(r, 800));
+    progress.stopThinking();
+    console.log(pc4.bold("\n  Scaffolding your ZK project...\n"));
+    await createProjectStructure(projectDir, projectOptions, progress);
+    progress.showSuccess("Project structure created");
   } catch (error) {
-    spinner.stop(false);
-    console.error(pc3.red("\nFailed to create project structure:"), error);
+    progress.showError("Failed to create project structure");
+    console.error(pc4.red("\n"), error);
     process.exit(1);
   }
   if (!projectOptions.skipGit) {
@@ -1442,28 +1591,28 @@ Error: Directory "${projectOptions.projectName}" already exists and is not empty
       gitSpinner.stop(true);
     } catch {
       gitSpinner.stop(false);
-      console.log(pc3.yellow("  Warning: Failed to initialize git repository"));
+      console.log(pc4.yellow("  Warning: Failed to initialize git repository"));
     }
   }
   if (!projectOptions.skipInstall) {
-    const installSpinner = createSpinner("Installing dependencies...");
-    installSpinner.start();
+    const installProgress = createInstallProgress();
+    installProgress.start();
     try {
       execSync("npm install", { cwd: projectDir, stdio: "ignore" });
-      installSpinner.stop(true);
+      installProgress.stop(true);
     } catch {
-      installSpinner.stop(false);
-      console.log(pc3.yellow('  Warning: Failed to install dependencies. Run "npm install" manually.'));
+      installProgress.stop(false);
+      console.log(pc4.yellow('  Run "npm install" manually.'));
     }
   }
   printSuccessMessage(projectOptions);
 }
-async function createProjectStructure(projectDir, options) {
-  await ensureDir(path2.join(projectDir, "circuits"));
-  await ensureDir(path2.join(projectDir, "src"));
-  await ensureDir(path2.join(projectDir, "src", "components"));
-  await ensureDir(path2.join(projectDir, "src", "lib"));
-  await ensureDir(path2.join(projectDir, "public"));
+async function createProjectStructure(projectDir, options, progress) {
+  const dirs = ["circuits", "src", "src/components", "src/lib", "public"];
+  for (const dir of dirs) {
+    await ensureDir(path2.join(projectDir, dir));
+    await progress.reportDirectory(dir);
+  }
   const files = [
     // Root config files
     ["package.json", generatePackageJson(options)],
@@ -1499,34 +1648,34 @@ async function createProjectStructure(projectDir, options) {
   }
   files.push(["circuits/index.ts", generateCircuitsIndex(options.template)]);
   files.push(["circuits/types.d.ts", generateCircuitTypes()]);
-  await Promise.all(
-    files.map(
-      ([relativePath, content]) => writeFile(path2.join(projectDir, relativePath), content)
-    )
-  );
+  for (let i = 0; i < files.length; i++) {
+    const [relativePath, content] = files[i];
+    await writeFile(path2.join(projectDir, relativePath), content);
+    await progress.reportFile(relativePath, i === files.length - 1);
+  }
 }
 function printSuccessMessage(options) {
   console.log();
-  console.log(pc3.green("\u2713") + " Project created successfully!");
+  console.log(pc4.green("\u2713") + " Project created successfully!");
   console.log();
   console.log("Next steps:");
   console.log();
-  console.log(pc3.cyan(`  cd ${options.projectName}`));
+  console.log(pc4.cyan(`  cd ${options.projectName}`));
   if (options.skipInstall) {
-    console.log(pc3.cyan("  npm install"));
+    console.log(pc4.cyan("  npm install"));
   }
-  console.log(pc3.cyan("  npm run dev"));
+  console.log(pc4.cyan("  npm run dev"));
   console.log();
-  console.log("Then open " + pc3.blue("http://localhost:5173") + " in your browser.");
+  console.log("Then open " + pc4.blue("http://localhost:5173") + " in your browser.");
   console.log();
   console.log("To add circuits:");
   console.log();
-  console.log(pc3.dim("  1. Create a new circuit in circuits/*.ts"));
-  console.log(pc3.dim("  2. Export it from circuits/index.ts"));
-  console.log(pc3.dim("  3. Add it to CIRCUITS array in src/App.tsx"));
+  console.log(pc4.dim("  1. Create a new circuit in circuits/*.ts"));
+  console.log(pc4.dim("  2. Export it from circuits/index.ts"));
+  console.log(pc4.dim("  3. Add it to CIRCUITS array in src/App.tsx"));
   console.log();
   console.log(
-    pc3.dim("Learn more: ") + pc3.blue("https://github.com/izi-noir/izi-noir")
+    pc4.dim("Learn more: ") + pc4.blue("https://github.com/izi-noir/izi-noir")
   );
   console.log();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-izi-noir",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "CLI to scaffold IZI-NOIR ZK projects",
   "type": "module",
   "bin": {