npm - create-interview-cockpit - Versions diffs - 0.10.0 → 0.12.0 - Mend

create-interview-cockpit 0.10.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/package.json +1 -1
package/template/client/src/api.ts +97 -0
package/template/client/src/components/CodeRunnerModal.tsx +941 -403
package/template/client/src/reactLab.ts +203 -64
package/template/cockpit.json +1 -1
package/template/server/src/index.ts +275 -0

package/template/server/src/index.ts CHANGED Viewed

@@ -2458,6 +2458,42 @@ function isPathInside(root: string, target: string): boolean {
   );
 }
+// Permissive npm command parser for the React lab.
+// Allows any npm subcommand (install, uninstall, run, update, etc.)
+// but blocks shell operators and dangerous flags.
+function parseReactLabCommand(command: string): { args: string[] } {
+  const tokens = splitShellLikeCommand(command);
+  if (tokens.length === 0) {
+    throw new Error("Command cannot be empty");
+  }
+  if (tokens[0] !== "npm") {
+    throw new Error("Only npm commands are supported in the React lab console");
+  }
+  if (tokens.some((t) => MODULE_FEDERATION_SHELL_META_TOKENS.has(t))) {
+    throw new Error(
+      "Shell operators are not supported. Run one npm command at a time.",
+    );
+  }
+  const dangerous = [
+    "--prefix",
+    "--workspaces",
+    "-w",
+    "--workspace",
+    "--global",
+    "-g",
+  ];
+  if (
+    tokens.some((t) => dangerous.some((d) => t === d || t.startsWith(d + "=")))
+  ) {
+    throw new Error("That flag is not allowed in the React lab console.");
+  }
+  return { args: tokens.slice(1) };
+}
 function parseModuleFederationCommand(command: string): {
   args: string[];
   displayCommand: string;
@@ -3330,6 +3366,245 @@ ${code}`;
   res.end();
 });
+// ─── React Lab (Vite) sandboxes ──────────────────────────────────────────────
+interface ReactLabSandboxEntry {
+  child: ReturnType<typeof spawn>;
+  port: number;
+  dir: string;
+  logs: string[];
+  ready: boolean;
+}
+const reactLabSandboxes = new Map<string, ReactLabSandboxEntry>();
+const REACT_LAB_SANDBOX_BASE = path.join(
+  os.tmpdir(),
+  "interview-cockpit-react-lab",
+);
+app.post("/api/react-lab/start", async (req, res) => {
+  const { files } = req.body as { files?: Record<string, string> };
+  if (!files || typeof files !== "object") {
+    return res.status(400).json({ error: "files is required" });
+  }
+  const id = randomUUID();
+  const dir = path.join(REACT_LAB_SANDBOX_BASE, id);
+  const logs: string[] = [];
+  try {
+    await fs.mkdir(dir, { recursive: true });
+    // Write all user files as-is
+    for (const [filePath, content] of Object.entries(files)) {
+      const fullPath = path.join(dir, filePath);
+      await fs.mkdir(path.dirname(fullPath), { recursive: true });
+      await fs.writeFile(fullPath, content, "utf8");
+    }
+    // Auto-generate index.html if the user didn't provide one
+    const hasIndex = await fs
+      .access(path.join(dir, "index.html"))
+      .then(() => true)
+      .catch(() => false);
+    if (!hasIndex) {
+      await fs.writeFile(
+        path.join(dir, "index.html"),
+        `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Lab</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>\n`,
+        "utf8",
+      );
+    }
+    // Install dependencies
+    appendSandboxLog(logs, "Installing dependencies…\n");
+    await runLoggedCommand(
+      npmCommand(),
+      ["install", "--no-audit", "--no-fund", "--prefer-offline"],
+      {
+        cwd: dir,
+        env: { ...process.env, npm_config_update_notifier: "false" },
+      },
+      logs,
+    );
+    const port = await getFreePort();
+    const child = spawn(
+      npmCommand(),
+      ["run", "dev", "--", "--port", String(port), "--host", "localhost"],
+      {
+        cwd: dir,
+        env: {
+          ...process.env,
+          npm_config_update_notifier: "false",
+          NO_COLOR: "1",
+        },
+      },
+    );
+    const entry: ReactLabSandboxEntry = {
+      child,
+      port,
+      dir,
+      logs,
+      ready: false,
+    };
+    const markReady = (text: string) => {
+      if (!entry.ready && /Local:|ready in/i.test(text)) {
+        entry.ready = true;
+      }
+    };
+    child.stdout.on("data", (chunk: Buffer) => {
+      markReady(appendSandboxLog(logs, chunk.toString()));
+    });
+    child.stderr.on("data", (chunk: Buffer) => {
+      markReady(appendSandboxLog(logs, chunk.toString()));
+    });
+    child.on("exit", () => {
+      reactLabSandboxes.delete(id);
+      fs.rm(dir, { recursive: true, force: true }).catch(() => {});
+    });
+    reactLabSandboxes.set(id, entry);
+    const deadline = Date.now() + 60_000;
+    while (!entry.ready && Date.now() < deadline) {
+      await new Promise((r) => setTimeout(r, 400));
+      if (!reactLabSandboxes.has(id)) {
+        return res
+          .status(500)
+          .json({ error: logs.join("").trim() || "Vite server exited" });
+      }
+    }
+    if (!entry.ready) {
+      return res
+        .status(504)
+        .json({ error: "Vite did not start in time", logs });
+    }
+    res.json({ id, port, url: `http://localhost:${port}` });
+  } catch (error: any) {
+    await fs.rm(dir, { recursive: true, force: true }).catch(() => {});
+    res.status(500).json({
+      error:
+        logs.join("").trim() || error?.message || "Failed to start React lab",
+    });
+  }
+});
+app.post("/api/react-lab/:id/update-files", async (req, res) => {
+  const sb = reactLabSandboxes.get(req.params.id);
+  if (!sb) return res.status(404).json({ error: "Sandbox not found" });
+  const { files } = req.body as { files?: Record<string, string> };
+  if (!files || typeof files !== "object")
+    return res.status(400).json({ error: "files is required" });
+  for (const [filePath, content] of Object.entries(files)) {
+    const fullPath = path.join(sb.dir, filePath);
+    await fs.mkdir(path.dirname(fullPath), { recursive: true });
+    await fs.writeFile(fullPath, content, "utf8");
+  }
+  res.json({ ok: true });
+});
+app.post("/api/react-lab/:id/command-stream", async (req, res) => {
+  const sb = reactLabSandboxes.get(req.params.id);
+  res.setHeader("Content-Type", "text/event-stream");
+  res.setHeader("Cache-Control", "no-cache");
+  res.setHeader("Connection", "keep-alive");
+  res.flushHeaders();
+  const send = (payload: unknown) => {
+    res.write(`data: ${JSON.stringify(payload)}\n\n`);
+  };
+  if (!sb) {
+    send({ type: "error", error: "Sandbox not found" });
+    res.end();
+    return;
+  }
+  const { command } = req.body as { command?: string };
+  if (typeof command !== "string" || !command.trim()) {
+    send({ type: "error", error: "command is required" });
+    res.end();
+    return;
+  }
+  try {
+    const parsed = parseReactLabCommand(command);
+    send({ type: "output", kind: "info", text: `$ ${command.trim()}\n` });
+    await runStreamedCommand(
+      npmCommand(),
+      parsed.args,
+      {
+        cwd: sb.dir,
+        env: { ...process.env, npm_config_update_notifier: "false" },
+      },
+      ({ kind, text }) => send({ type: "output", kind, text }),
+    );
+    send({ type: "complete" });
+  } catch (error: any) {
+    send({ type: "error", error: error?.message || "Command failed" });
+  }
+  res.end();
+});
+app.get("/api/react-lab/:id/read-file", async (req, res) => {
+  const sb = reactLabSandboxes.get(req.params.id);
+  if (!sb) return res.status(404).json({ error: "Sandbox not found" });
+  const filePath =
+    typeof req.query.path === "string" ? req.query.path : undefined;
+  if (!filePath) return res.status(400).json({ error: "path is required" });
+  // Restrict to safe relative paths only
+  const normalized = path.normalize(filePath).replace(/^\//, "");
+  if (normalized.startsWith("..") || path.isAbsolute(normalized)) {
+    return res.status(400).json({ error: "Invalid path" });
+  }
+  const fullPath = path.join(sb.dir, normalized);
+  if (!isPathInside(sb.dir, fullPath)) {
+    return res.status(400).json({ error: "Path must stay inside the sandbox" });
+  }
+  try {
+    const content = await fs.readFile(fullPath, "utf8");
+    res.json({ path: normalized, content });
+  } catch {
+    res.status(404).json({ error: "File not found" });
+  }
+});
+app.delete("/api/react-lab/:id", async (req, res) => {
+  const sb = reactLabSandboxes.get(req.params.id);
+  if (sb) {
+    sb.child.kill("SIGTERM");
+    reactLabSandboxes.delete(req.params.id);
+    await fs.rm(sb.dir, { recursive: true, force: true }).catch(() => {});
+  }
+  res.json({ ok: true });
+});
 // ─── Start ───────────────────────────────────────────────
 (async () => {