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

create-interview-cockpit 0.11.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 +426 -240
package/template/client/src/reactLab.ts +96 -31
package/template/cockpit.json +1 -1
package/template/server/src/index.ts +275 -0

package/template/client/src/reactLab.ts CHANGED Viewed

@@ -5,7 +5,65 @@ export type FrontendLabType = FrontendLabWorkspace["type"];
 // ── Default file contents ────────────────────────────────────────────────────
 const REACT_DEFAULT_FILES: Record<string, string> = {
-  "App.tsx": `import { useState } from "react";
+  "package.json": `{
+  "name": "react-lab",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.6.2",
+    "vite": "^6.0.3"
+  }
+}
+`,
+  "vite.config.ts": `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    headers: {
+      "X-Frame-Options": "ALLOWALL",
+    },
+  },
+});
+`,
+  "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>
+`,
+  "src/main.tsx": `import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`,
+  "src/App.tsx": `import { useState } from "react";
 import { Counter } from "./Counter";
 import type { User } from "./types";
@@ -30,7 +88,7 @@ export default function App() {
   );
 }
 `,
-  "Counter.tsx": `import { useState, useCallback } from "react";
+  "src/Counter.tsx": `import { useState, useCallback } from "react";
 import type { CounterProps } from "./types";
 // Stateful child component — receives props from App
@@ -88,7 +146,7 @@ export function Counter({ initialCount = 0, onCountChange }: CounterProps) {
   );
 }
 `,
-  "types.ts": `// Type definitions — shared across components
+  "src/types.ts": `// Type definitions — shared across components
 export interface User {
   name: string;
@@ -1065,7 +1123,7 @@ export const DEFAULT_REACT_LAB: FrontendLabWorkspace = {
   version: 1,
   label: "React Lab",
   type: "react",
-  activeFile: "App.tsx",
+  activeFile: "src/App.tsx",
   files: REACT_DEFAULT_FILES,
 };
@@ -1175,9 +1233,11 @@ export function getEntryFile(workspace: FrontendLabWorkspace): string {
       ? "apps/host/src/App.jsx"
       : Object.keys(workspace.files)[0];
   }
-  return workspace.files["App.tsx"]
-    ? "App.tsx"
-    : Object.keys(workspace.files)[0];
+  return workspace.files["main.tsx"]
+    ? "main.tsx"
+    : workspace.files["App.tsx"]
+      ? "App.tsx"
+      : Object.keys(workspace.files)[0];
 }
 /** Preferred display order for the file tree. */
@@ -1228,7 +1288,8 @@ export function resolveNextjsEntry(
  *
  * Approach: loads React 18 UMD + Babel standalone from CDN, runs a
  * custom module system built on top of Babel's CJS transform plugin,
- * then renders the default export from `entryFile`.
+ * then either runs a bootstrap entry such as main.tsx or renders the
+ * default export from `entryFile`.
  *
  * CDN URLs are version-pinned so the preview is reproducible.
  */
@@ -1242,9 +1303,6 @@ export function generatePreviewHTML(
   const entryJSON = JSON.stringify(entryFile);
   const sandboxJSON = JSON.stringify(sandboxUrl ?? "");
   const isNextjsJSON = isNextjs ? "true" : "false";
-  // _i breaks up the 'import' keyword so Vite/Babel doesn't misparse
-  // the template literal below as containing real module import declarations
-  const _i = "import";
   return `<!DOCTYPE html>
 <html>
@@ -1252,6 +1310,8 @@ export function generatePreviewHTML(
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script>window.__F__=${filesJSON};window.__E__=${entryJSON};window.SANDBOX_URL=${sandboxJSON};window.__NX__=${isNextjsJSON};</script>
+<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
 <script src="https://unpkg.com/@babel/standalone@7.26.10/babel.min.js"></script>
 <style>
 *{box-sizing:border-box}
@@ -1262,11 +1322,7 @@ body{margin:0;background:#fff;font-family:system-ui,sans-serif}
 <body>
 <div id="root"></div>
 <div id="__err"></div>
-<script type="module">
-${_i} React from 'https://esm.sh/react@19.1.0';
-${_i} * as ReactDOM from 'https://esm.sh/react-dom@19.1.0/client?deps=react@19.1.0';
-window.React = React;
-window.ReactDOM = ReactDOM;
+<script>
 (function(){
   var files=window.__F__,entry=window.__E__,reg={};
   function norm(from,id){
@@ -1329,27 +1385,36 @@ window.ReactDOM = ReactDOM;
   window.addEventListener('unhandledrejection',function(e){showErr(e.reason&&e.reason.message?e.reason.message:String(e.reason));});
   try{
     order.forEach(loadMod);
-    var em=reg[entry];
-    if(!em)throw new Error('Entry not found: '+entry);
-    var Comp=em.exports.default;
-    if(typeof Comp!=='function')throw new Error('No default export (function/component) in '+entry);
     // Expose a navigate helper so in-preview code can trigger URL bar changes:
     //   window.__nxNavigate('/dashboard')
     window.__nxNavigate=function(to){try{parent.postMessage({type:'rlab-nav',to:to},'*');}catch(e){}};
-    var pageEl=React.createElement(Comp,null);
-    // In Next.js mode: wrap the page in app/layout.tsx if it exists
-    if(window.__NX__){
-      var lk=null;
-      for(var _le of['app/layout.tsx','app/layout.ts','app/layout.jsx','app/layout.js']){
-        if(reg[_le]){lk=_le;break;}
+    var em=reg[entry];
+    if(!em)throw new Error('Entry not found: '+entry);
+    var isBootstrapEntry=/(^|\\/)(main|index)\\.(tsx|ts|jsx|js)$/.test(entry);
+    if(isBootstrapEntry){
+      if(typeof em.exports.mount==='function'){
+        var mountRoot=document.getElementById('root');
+        if(!mountRoot)throw new Error('Root element #root not found');
+        em.exports.mount(mountRoot);
       }
-      if(lk&&typeof reg[lk].exports.default==='function'){
-        pageEl=React.createElement(reg[lk].exports.default,null,pageEl);
+    }else{
+      var Comp=em.exports.default;
+      if(typeof Comp!=='function')throw new Error('No default export (function/component) in '+entry);
+      var pageEl=React.createElement(Comp,null);
+      // In Next.js mode: wrap the page in app/layout.tsx if it exists
+      if(window.__NX__){
+        var lk=null;
+        for(var _le of['app/layout.tsx','app/layout.ts','app/layout.jsx','app/layout.js']){
+          if(reg[_le]){lk=_le;break;}
+        }
+        if(lk&&typeof reg[lk].exports.default==='function'){
+          pageEl=React.createElement(reg[lk].exports.default,null,pageEl);
+        }
       }
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        React.createElement(React.StrictMode,null,pageEl)
+      );
     }
-    ReactDOM.createRoot(document.getElementById('root')).render(
-      React.createElement(React.StrictMode,null,pageEl)
-    );
     try{parent.postMessage({type:'rlab-ready'},'*');}catch(e){}
   }catch(err){showErr(err.message+(err.stack?'\\n\\n'+err.stack:''));}
 })();

package/template/cockpit.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "version": "0.9.0"
+  "version": "0.10.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 () => {