feat(progress-bar): setup basic

package.json

@@ -27,6 +27,7 @@
     "prettier": "3.3.3"
   },
   "dependencies": {
+    "cli-progress": "^3.12.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 createProgressBar from './utils/progressBar.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,17 @@ const createLoader = () => {
       filePath => extname(filePath) === '.md'
     );
 
+    const progressBar = createProgressBar('Loading files');
+    progressBar.start(resolvedFiles.length, 0);
+
     return resolvedFiles.map(async filePath => {
       const fileContents = await readFile(filePath, 'utf-8');
+      progressBar.increment();
+      // normally we stop the progress bar when the loop is done
+      // but here we return the loop so we need to stop it when the last file is loaded
+      if (progressBar.value === progressBar.total) {
+        progressBar.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 createProgressBar from './utils/progressBar.mjs';
 
 /**
  * Creates an API doc parser for a given Markdown API doc file
@@ -177,7 +178,18 @@ 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 progressBar = createProgressBar('Parsing API Docs');
+    progressBar.start(apiDocs.length, 0);
+
+    const resolvedApiDocEntries = await Promise.all(
+      apiDocs.map(async apiDoc => {
+        progressBar.increment();
+        return await parseApiDoc(apiDoc);
+      })
+    );
+
+    progressBar.stop();
 
     return resolvedApiDocEntries.flat();
   };

src/utils/generators.mjs

@@ -2,6 +2,8 @@
 
 import { coerce } from 'semver';
 
+import createProgressBar from './progressBar.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,20 @@ export const groupNodesByModule = nodes => {
   /** @type {Map<string, Array<ApiDocMetadataEntry>>} */
   const groupedNodes = new Map();
 
+  const progressBar = createProgressBar(groupNodesByModule.name);
+  progressBar.start(nodes.length, 0);
+
   for (const node of nodes) {
     if (!groupedNodes.has(node.api)) {
       groupedNodes.set(node.api, []);
     }
 
     groupedNodes.get(node.api).push(node);
+    progressBar.increment();
   }
 
+  progressBar.stop();
+
   return groupedNodes;
 };
 

src/utils/progressBar.mjs

@@ -0,0 +1,24 @@
+import { styleText } from 'node:util';
+
+import cliProgress from 'cli-progress';
+
+/**
+ *
+ * Create a progress bar instance
+ * with our custom format
+ *
+ * @param {string} label
+ * @returns {import('cli-progress').SingleBar}
+ */
+function createProgressBar(label = '') {
+  const format = ` ${styleText(['bold', 'green'], '{bar}')} | ${label} {percentage}% | {value}/{total}`;
+
+  return new cliProgress.SingleBar({
+    format,
+    barCompleteChar: '\u2588',
+    barIncompleteChar: '\u2591',
+    hideCursor: true,
+  });
+}
+
+export default createProgressBar;

src/utils/tests/progressBar.test.mjs

@@ -0,0 +1,15 @@
+import assert from 'node:assert';
+import { test } from 'node:test';
+
+import cliProgress from 'cli-progress';
+
+import createProgressBar from '../progressBar.mjs';
+
+/**
+ * Simple test to unsure that the progress bar is created
+ * and we assume that it's work with ou style
+ */
+test('createProgressBar returns an instance of SingleBar', () => {
+  const bar = createProgressBar();
+  assert.ok(bar instanceof cliProgress.SingleBar);
+});