feat(web-host): add badge on wand button to track the examples you don't have tested yet

Author: topheman

packages/web-host/src/components/Repl.tsx

@@ -1,9 +1,9 @@
 import { Play, WandSparkles } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { useGetExampleCommand } from "../hooks/exampleCommands";
 import { useReplHistory } from "../hooks/replHistory";
 import { useReplLogic } from "../hooks/replLogic";
 import { cn } from "../utils/css";
-import { getExampleCommand } from "../utils/exampleCommands";
 import type { WasmEngine } from "../wasm/engine";
 import { ReplHistory } from "./ReplHistory";
 
@@ -23,6 +23,8 @@ export function Repl({
   const [inputFocus, setInputFocus] = useState(false);
   const { history } = useReplHistory();
   const [wandButtonUsed, setWandButtonUsed] = useState(false);
+  const { getExampleCommand, remainingExampleCommands, doneExampleCommands } =
+    useGetExampleCommand();
 
   function handleSubmit(
     event: Pick<
@@ -123,12 +125,22 @@ export function Repl({
               }}
               type="button"
               className={cn(
-                "cursor-pointer bg-primary text-white px-4 py-2 rounded-md",
+                "cursor-pointer bg-primary text-white px-4 py-2 rounded-md relative",
                 !wandButtonUsed && "animate-bounce",
               )}
               title="Run example command"
             >
               <WandSparkles />
+              {(() => {
+                if (!doneExampleCommands) {
+                  return (
+                    <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center font-bold">
+                      {remainingExampleCommands}
+                    </span>
+                  );
+                }
+                return null;
+              })()}
             </button>
           </div>
         </form>

packages/web-host/src/hooks/exampleCommands.ts

@@ -0,0 +1,131 @@
+import { useState } from "react";
+
+function echo_foo() {
+  return "echo foo";
+}
+
+function echo_bar() {
+  return "echo bar";
+}
+
+function echo_baz() {
+  return "echo baz";
+}
+
+function echo_$0() {
+  return "echo $0";
+}
+
+function echo_$ROOT_$USER() {
+  return "echo $ROOT/$USER";
+}
+
+function export_USER_WebAssembly() {
+  return "export USER=WebAssembly";
+}
+
+function export_USER_Tophe() {
+  return "export USER=Tophe";
+}
+
+function greet_USER() {
+  return "greet $USER";
+}
+
+function azertyuiop() {
+  return "azertyuiop";
+}
+
+function echo_$question_mark() {
+  return "echo $?";
+}
+
+function help() {
+  return "help";
+}
+
+function man_weather() {
+  return "man weather";
+}
+
+function ls(path?: string) {
+  if (path) {
+    return `ls ${path}`;
+  }
+  return "ls";
+}
+
+function cat(path?: string) {
+  if (path) {
+    return `cat ${path}`;
+  }
+  return "cat";
+}
+
+function weather_Paris() {
+  return "weather Paris";
+}
+
+function export_DATE() {
+  return `export DATE=${new Date().toISOString()}`;
+}
+
+function echo_DATE() {
+  return `echo $DATE`;
+}
+
+const commands = [
+  echo_foo,
+  echo_bar,
+  echo_baz,
+  echo_$0,
+  echo_$ROOT_$USER,
+  greet_USER,
+  echo_$0,
+  export_USER_WebAssembly,
+  echo_$ROOT_$USER,
+  echo_$0,
+  echo_$question_mark,
+  azertyuiop,
+  echo_$question_mark,
+  echo_$question_mark,
+  export_DATE,
+  echo_DATE,
+  export_USER_Tophe,
+  echo_$ROOT_$USER,
+  ls,
+  () => cat("README.md"),
+  ls,
+  () => ls("data"),
+  () => ls("data/processed"),
+  () => ls("data/processed/2024"),
+  () => ls("documents"),
+  () => cat("documents/config.json"),
+  weather_Paris,
+  man_weather,
+  help,
+];
+
+export function useGetExampleCommand() {
+  const [index, setIndex] = useState<number>(0);
+  const [command, setCommand] = useState<string>("");
+  const [remaining, setRemaining] = useState<number>(commands.length);
+  const [done, setDone] = useState<boolean>(false);
+
+  return {
+    getExampleCommand: function getExampleCommand() {
+      if (commands.length - index - 1 === 0) {
+        setDone(true);
+        setIndex(0);
+      }
+      const output = commands[index]();
+      setCommand(output);
+      setRemaining((left) => left - 1);
+      setIndex((index) => index + 1);
+      return output;
+    },
+    currentExampleCommand: command,
+    remainingExampleCommands: remaining,
+    doneExampleCommands: done,
+  };
+}

packages/web-host/src/utils/exampleCommands.ts

@@ -59,9 +59,7 @@ export async function clickWandButton(
     expectStderr?: string;
   } = {},
 ) {
-  await page
-    .getByRole("button", { name: "Run example command" })
-    .click({ force: true });
+  await page.getByTitle("Run example command").click({ force: true });
   const input = await page.getByPlaceholder("Type a command...");
   await expect(input).toHaveValue(expectStdin);
   const stdin = await getLastStd(page, "stdin");