improve spinner & task management

Author: blefnk

README.md

@@ -5,6 +5,7 @@
   "ignorePaths": ["examples/deprecated", "dist-jsr", "dist-npm"],
   "words": [
     "alacritty",
+    "alcalzone",
     "alternar",
     "anims",
     "anykey",
@@ -18,6 +19,7 @@
     "ausgewählt",
     "avez",
     "Baratheon",
+    "bitflag",
     "blefnk",
     "browserlist",
     "browserlistrc",
@@ -54,13 +56,16 @@
     "figliolia",
     "Fireship",
     "Focusable",
+    "focusables",
     "forgetme",
+    "Gawf",
     "Geralt",
     "goroutines",
     "Greyjoy",
     "Gyllenhaal",
     "haben",
     "Haha",
+    "hotmail",
     "hoverable",
     "iife",
     "invertir",
@@ -105,15 +110,19 @@
     "sbuf",
     "scelto",
     "scule",
+    "segs",
     "selección",
     "seleccionar",
     "sentencer",
     "shadcn",
+    "shoutout",
     "signup",
     "Silverhand",
     "sisteransi",
+    "Speedrun",
     "Sprache",
     "subchoices",
+    "suped",
     "Targ",
     "Targaryen",
     "terkelg",
@@ -126,13 +135,16 @@
     "typesafety",
     "typestat",
     "Tyrell",
+    "unclip",
     "unjs",
     "unpub",
     "unstub",
     "valign",
+    "valtio",
     "venv",
     "Vous",
     "vsprintf",
+    "WCAG",
     "wezterm",
     "Whoo",
     "Wybrałeś",

bun.lockb

@@ -9,64 +9,81 @@ async function examplesRunner() {
 
   const exampleToRun = await selectPrompt({
     title: "Choose an example to run",
+    titleColor: "passionGradient",
     options: [
       {
-        label: "✨ The Most Full-Featured Example",
-        value: "1-main",
+        label: "✨ Full-Featured Example",
+        value: "main",
         hint: "recommended",
       },
       {
-        label: pc.dim("Mono Component Example"),
-        value: "2-mono",
+        label: "Spinner Example",
+        value: "spinner",
+        hint: "experimental",
+      },
+      {
+        label: pc.dim("Task Example"),
+        value: "task",
+        hint: pc.dim("not finished"),
+      },
+      {
+        label: pc.dim("Progressbar Example"),
+        value: "progressbar",
         hint: pc.dim("not finished"),
       },
       {
         label: pc.dim("Simple Example"),
-        value: "3-simple",
+        value: "simple",
         hint: pc.dim("not finished"),
       },
       {
         label: pc.dim("with flags 1 Example"),
-        value: "4-cmd-a",
+        value: "cmd-a",
         hint: pc.dim("not finished"),
       },
       {
         label: pc.dim("with flags 2 Example"),
-        value: "5-cmd-b",
+        value: "cmd-b",
         hint: pc.dim("not finished"),
       },
       { label: "🗝️  Exit", value: "exit" },
     ] as const,
-    defaultValue: "1-main",
+    defaultValue: "main",
   });
 
   switch (exampleToRun) {
-    case "1-main":
-      await import("./1-main.js");
+    case "main":
+      await import("./main.js");
+      break;
+    case "spinner":
+      await import("./other/spinner.js");
+      break;
+    case "task":
+      await import("./other/task.js");
       break;
-    case "2-mono":
-      await import("./2-mono.js");
+    case "progressbar":
+      await import("./other/progress.js");
       break;
-    case "3-simple":
-      await import("./3-simple.js");
+    case "simple":
+      await import("./other/simple.js");
       break;
-    case "4-cmd-a":
+    case "cmd-a":
       console.clear();
       console.log(
-        "`bun examples/4-args-a.ts Alice --friendly --age 22 --adj cool`",
+        "`bun examples/other/args-a.ts Alice --friendly --age 22 --adj cool`",
       );
       console.log("Run without any arguments to see the help message.");
       break;
-    case "5-cmd-b":
+    case "cmd-b":
       console.clear();
       console.log(
-        "1. [BUILD] `bun examples/5-args-b.ts build ./src --workDir ./src`",
+        "1. [BUILD] `bun examples/other/args-b.ts build ./src --workDir ./src`",
       );
       console.log(
-        "2. [DEBUG] `bun examples/5-args-b.ts debug --feature database-query`",
+        "2. [DEBUG] `bun examples/other/args-b.ts debug --feature database-query`",
       );
       console.log(
-        "3. [DEPLOY] `bun examples/5-args-b.ts deploy --include '*.js' --exclude '*.d.ts'`",
+        "3. [DEPLOY] `bun examples/other/args-b.ts deploy --include '*.js' --exclude '*.d.ts'`",
       );
       console.log("Run without any arguments to see the help message.");
       break;

cspell.json

@@ -1,6 +1,6 @@
 import { defineCommand, runMain } from "~/main.js";
 
-import packageJson from "../package.json" with { type: "json" };
+import packageJson from "../../package.json" with { type: "json" };
 
 const main = defineCommand({
   meta: {
@@ -15,9 +15,9 @@ const main = defineCommand({
     console.info("✅ Cleanup");
   },
   subCommands: {
-    build: () => import("./src/commands/build.js").then((r) => r.default),
-    deploy: () => import("./src/commands/deploy.js").then((r) => r.default),
-    debug: () => import("./src/commands/debug.js").then((r) => r.default),
+    build: () => import("../src/commands/build.js").then((r) => r.default),
+    deploy: () => import("../src/commands/deploy.js").then((r) => r.default),
+    debug: () => import("../src/commands/debug.js").then((r) => r.default),
   },
 });
 

example.png

@@ -1,6 +1,12 @@
 // 2-mono-example.ts: A fun example of a quiz game. Inspired by CLI-game created by Fireship. The example demonstrates how to use a mono prompt() component.
 
-import { animateText, inputPrompt, task } from "~/main.js";
+import {
+  animateText,
+  inputPrompt,
+  advancedTaskPrompt,
+  endPrompt,
+  msg,
+} from "~/main.js";
 import { prompt } from "~/mono/mono.js";
 import { colorize } from "~/utils/colorize.js";
 import { errorHandler } from "~/utils/errors.js";
@@ -48,7 +54,7 @@ async function main() {
     ],
   });
 
-  await task({
+  /* await advancedTaskPrompt({
     initialMessage: "Checking answer...",
     successMessage: "Answer checked successfully.",
     spinnerSolution: "ora",
@@ -58,11 +64,54 @@ async function main() {
       updateMessage(
         answer === "Dec 4th, 1995"
           ? `Nice work ${playerName}. That's a legit answer!`
-          : `🫠 Game over, ${playerName}! You lose!`,
+          : `🫠  Game over, ${playerName}! You lose!`,
       );
       await new Promise((resolve) => setTimeout(resolve, 1000));
     },
-  });
+  }); */
+
+  const result = await advancedTaskPrompt(
+    "Check answer",
+    {
+      priority: "normal",
+      displayType: "progress",
+    },
+    async ({ setStatus, setError, setProgress }) => {
+      setProgress({
+        current: 0,
+        total: 5,
+        message: "Starting verification...",
+      });
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      for (let i = 0; i < 5; i++) {
+        setProgress({
+          current: i + 1,
+          total: 5,
+          message: `Step ${i + 1}: Verifying answer...`,
+        });
+        await new Promise((resolve) => setTimeout(resolve, 400));
+      }
+
+      const isCorrect = answer === "Dec 4th, 1995";
+
+      if (!isCorrect) {
+        setError(
+          `🫠  Game over, ${playerName}! You lose!\nNo worries, you can try again!`,
+        );
+        // Wait a bit to ensure the message is displayed
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        process.exit(1);
+      }
+
+      setStatus(`Nice work ${playerName}. That's a legit answer!`);
+      return isCorrect;
+    },
+  );
+
+  if (!result) {
+    return;
+  }
 
   const message = `Congrats !\n $ 1 , 0 0 0 , 0 0 0`;
 
@@ -81,6 +130,15 @@ async function main() {
     titleTypography: "bold",
     border: false,
   });
+
+  msg({ type: "M_BAR" });
+
+  await endPrompt({
+    title: "Thanks for playing!\n",
+    titleColor: "passionGradient",
+    titleTypography: "bold",
+  });
+
   process.exit(0);
 }