feat(progress-bar): setup basic

index.mjs

@@ -0,0 +1,24 @@
+import { Spinner } from "./src/utils/spinner.mjs";
+import * as prompts from '@clack/prompts';
+
+prompts.intro('spinner start...');
+
+const spinner = new Spinner();
+spinner.total = 100;
+
+spinner.start();
+
+new Promise((resolve) => {
+  let progress = 0;
+  const timer = setInterval(() => {
+    progress = Math.min(spinner.total, progress + 1);
+    spinner.update(1, `Loading... ${progress}/${spinner.total}`);
+    if (progress >= spinner.total) {
+      clearInterval(timer);
+      resolve(true);
+    }
+  }, 100);
+}).then(() => {
+  spinner.stop('Done');
+  prompts.outro('spinner stop...');
+});

package.json

@@ -27,6 +27,7 @@
     "prettier": "3.3.3"
   },
   "dependencies": {
+    "@clack/prompts": "^0.9.0",
     "commander": "^12.1.0",
     "github-slugger": "^2.0.0",
     "glob": "^11.0.0",

src/loader.mjs

@@ -6,6 +6,8 @@ import { extname } from 'node:path';
 import { globSync } from 'glob';
 import { VFile } from 'vfile';
 
+import { Spinner } from './utils/spinner.mjs';
+
 /**
  * This method creates a simple abstract "Loader", which technically
  * could be used for different things, but here we want to use it to load
@@ -26,8 +28,19 @@ const createLoader = () => {
       filePath => extname(filePath) === '.md'
     );
 
+    const spinner = new Spinner();
+    spinner.total = resolvedFiles.length;
+    spinner.start();
+
     return resolvedFiles.map(async filePath => {
       const fileContents = await readFile(filePath, 'utf-8');
+      spinner.update(1);
+
+      // normally we stop the spinner when the loop is done
+      // but here we return the loop so we need to stop it when the last file is loaded
+      if (spinner.progress === spinner.total) {
+        spinner.stop();
+      }
 
       return new VFile({ path: filePath, value: fileContents });
     });

src/parser.mjs

@@ -11,6 +11,7 @@ import createQueries from './queries.mjs';
 
 import { getRemark } from './utils/remark.mjs';
 import { createNodeSlugger } from './utils/slugger.mjs';
+import { Spinner } from './utils/spinner.mjs';
 
 /**
  * Creates an API doc parser for a given Markdown API doc file
@@ -177,7 +178,20 @@ const createParser = () => {
   const parseApiDocs = async apiDocs => {
     // We do a Promise.all, to ensure that each API doc is resolved asynchronously
     // but all need to be resolved first before we return the result to the caller
-    const resolvedApiDocEntries = await Promise.all(apiDocs.map(parseApiDoc));
+
+    const spinner = new Spinner();
+    spinner.start();
+    spinner.total = apiDocs.length;
+
+    const resolvedApiDocEntries = await Promise.all(
+      apiDocs.map(apiDoc => {
+        spinner.update(1);
+
+        return parseApiDoc(apiDoc);
+      })
+    );
+
+    spinner.stop();
 
     return resolvedApiDocEntries.flat();
   };

src/utils/generators.mjs

@@ -2,6 +2,8 @@
 
 import { coerce } from 'semver';
 
+import { Spinner } from '../utils/spinner.mjs';
+
 /**
  * Groups all the API metadata nodes by module (`api` property) so that we can process each different file
  * based on the module it belongs to.
@@ -12,14 +14,21 @@ export const groupNodesByModule = nodes => {
   /** @type {Map<string, Array<ApiDocMetadataEntry>>} */
   const groupedNodes = new Map();
 
+  const spinner = new Spinner();
+  spinner.total = nodes.length;
+  spinner.start();
+
   for (const node of nodes) {
     if (!groupedNodes.has(node.api)) {
       groupedNodes.set(node.api, []);
     }
 
     groupedNodes.get(node.api).push(node);
+    spinner.update(1);
   }
 
+  spinner.stop();
+
   return groupedNodes;
 };
 

src/utils/spinner.mjs

@@ -0,0 +1,32 @@
+import * as prompts from '@clack/prompts';
+
+export class Spinner {
+  constructor() {
+    this.spinner = prompts.spinner();
+    this.progress = 0;
+    this.total = 0;
+  }
+
+  start() {
+    this.spinner.start();
+  }
+
+  stop(message = 'Done') {
+    this.spinner.stop(message);
+  }
+
+  /**
+   *
+   * @param {number} increment
+   * @param {string} customMessage
+   */
+  update(increment = 1, customMessage) {
+    this.progress += increment;
+
+    if (customMessage) {
+      this.spinner.message(customMessage);
+      return;
+    }
+    this.spinner.message(`Loading... ${this.progress}/${this.total}`);
+  }
+}

src/utils/tests/spinner.test.mjs

@@ -0,0 +1,11 @@
+import { describe, it } from "node:test";
+import { Spinner } from "../spinner.mjs";
+
+describe("spinner", () => {
+  it("should instantiate a new Spinner", () => {
+    const spinner = new Spinner();
+    spinner.start();
+    spinner.stop();
+  });
+
+});