npm - create-interview-cockpit - Versions diffs - 0.6.0 → 0.7.0 - Mend

create-interview-cockpit 0.6.0 → 0.7.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 (11) hide show

package/package.json +1 -1
package/template/client/src/api.ts +65 -2
package/template/client/src/components/CodeContextPanel.tsx +111 -0
package/template/client/src/components/CodeRunnerModal.tsx +457 -163
package/template/client/src/reactLab.ts +488 -5
package/template/client/src/store.ts +35 -4
package/template/client/src/types.ts +3 -2
package/template/cockpit.json +1 -1
package/template/server/src/google-drive.ts +2 -0
package/template/server/src/index.ts +266 -5
package/template/server/src/storage.ts +11 -2

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

@@ -1,5 +1,7 @@
 import type { FrontendLabWorkspace } from "./types";
+export type FrontendLabType = FrontendLabWorkspace["type"];
 // ── Default file contents ────────────────────────────────────────────────────
 const REACT_DEFAULT_FILES: Record<string, string> = {
@@ -207,6 +209,457 @@ export interface User {
 `,
 };
+const MODULE_FEDERATION_DEFAULT_FILES: Record<string, string> = {
+  "README.md": `# Webpack Module Federation Lab
+This lab uses real webpack 5 + webpack-dev-server + Module Federation.
+## What is here
+- package.json runs three apps together: a host plus two remotes
+- apps/host consumes federated modules from the remotes
+- apps/profile exposes a profile widget
+- apps/checkout exposes a checkout widget
+## Good experiments
+1. Break one remote URL in apps/host/webpack.config.js and see how the host fails.
+2. Rename an exposed module in a remote without updating the host import.
+3. Stop sharing React as a singleton and inspect the runtime behavior.
+4. Add a new remote by copying an existing app and wiring it into the host.
+## Notes
+- Ports are injected by the lab runner through environment variables.
+- If you change package.json, restart the webpack lab so dependencies/scripts are re-read.
+`,
+  "package.json": `{
+  "name": "webpack-module-federation-lab",
+  "private": true,
+  "scripts": {
+    "dev": "concurrently -k -n host,profile,checkout -c cyan,magenta,yellow 'npm run dev:host' 'npm run dev:profile' 'npm run dev:checkout'",
+    "dev:host": "webpack serve --config apps/host/webpack.config.js",
+    "dev:profile": "webpack serve --config apps/profile/webpack.config.js",
+    "dev:checkout": "webpack serve --config apps/checkout/webpack.config.js",
+    "build": "npm run build:host && npm run build:profile && npm run build:checkout",
+    "build:host": "webpack --config apps/host/webpack.config.js",
+    "build:profile": "webpack --config apps/profile/webpack.config.js",
+    "build:checkout": "webpack --config apps/checkout/webpack.config.js"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "concurrently": "^9.2.1",
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5.6.7",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2",
+    "webpack-dev-server": "^5.2.3"
+  }
+}
+`,
+  "apps/host/public/index.html": `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Host App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`,
+  "apps/host/src/index.jsx": `import("./bootstrap");
+`,
+  "apps/host/src/bootstrap.jsx": `import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`,
+  "apps/host/src/App.jsx": `import React, { Suspense } from "react";
+const ProfileCard = React.lazy(() => import("profile/ProfileCard"));
+const CheckoutPanel = React.lazy(() => import("checkout/CheckoutPanel"));
+function RemoteBoundary({ title, children }) {
+  return (
+    <div
+      style={{
+        border: "1px solid #cbd5e1",
+        borderRadius: "0.75rem",
+        padding: "1rem",
+        background: "#fff",
+      }}
+    >
+      <div style={{ fontSize: "0.8rem", color: "#64748b", marginBottom: "0.75rem" }}>
+        {title}
+      </div>
+      <Suspense fallback={<p style={{ color: "#64748b" }}>Loading remote...</p>}>
+        {children}
+      </Suspense>
+    </div>
+  );
+}
+export default function App() {
+  return (
+    <main
+      style={{
+        minHeight: "100vh",
+        margin: 0,
+        padding: "2rem",
+        background: "linear-gradient(135deg, #e0f2fe 0%, #f8fafc 50%, #fef3c7 100%)",
+        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+      }}
+    >
+      <div style={{ maxWidth: "1100px", margin: "0 auto" }}>
+        <div style={{ marginBottom: "1.5rem" }}>
+          <p style={{ margin: 0, color: "#0369a1", fontSize: "0.8rem", letterSpacing: "0.08em", textTransform: "uppercase" }}>
+            Webpack 5 Host
+          </p>
+          <h1 style={{ margin: "0.35rem 0 0", fontSize: "2rem", color: "#0f172a" }}>
+            Module Federation Playground
+          </h1>
+          <p style={{ color: "#475569", maxWidth: "52rem" }}>
+            The host renders two independently built remotes. Change a remote expose, shared dependency,
+            or URL in the webpack configs to see the same failures you would hit in a real setup.
+          </p>
+        </div>
+        <section
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+            gap: "1rem",
+          }}
+        >
+          <RemoteBoundary title="Remote: profile/ProfileCard">
+            <ProfileCard />
+          </RemoteBoundary>
+          <RemoteBoundary title="Remote: checkout/CheckoutPanel">
+            <CheckoutPanel />
+          </RemoteBoundary>
+        </section>
+      </div>
+    </main>
+  );
+}
+`,
+  "apps/host/webpack.config.js": `const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { ModuleFederationPlugin } = require("webpack").container;
+const hostPort = Number(process.env.HOST_PORT || 3100);
+const profilePort = Number(process.env.PROFILE_PORT || 3101);
+const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
+module.exports = {
+  mode: "development",
+  entry: path.resolve(__dirname, "./src/index.jsx"),
+  output: {
+    publicPath: "http://localhost:" + hostPort + "/",
+    clean: true,
+  },
+  resolve: {
+    extensions: [".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "esbuild-loader",
+          options: {
+            loader: "jsx",
+            jsx: "automatic",
+            target: "es2020",
+          },
+        },
+      },
+    ],
+  },
+  devServer: {
+    port: hostPort,
+    historyApiFallback: true,
+    hot: true,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "host",
+      remotes: {
+        profile: "profile@http://localhost:" + profilePort + "/remoteEntry.js",
+        checkout: "checkout@http://localhost:" + checkoutPort + "/remoteEntry.js",
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: false },
+        "react-dom": { singleton: true, requiredVersion: false },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "./public/index.html"),
+    }),
+  ],
+};
+`,
+  "apps/profile/public/index.html": `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Profile Remote</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`,
+  "apps/profile/src/index.jsx": `import("./bootstrap");
+`,
+  "apps/profile/src/bootstrap.jsx": `import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`,
+  "apps/profile/src/App.jsx": `import React from "react";
+import ProfileCard from "./ProfileCard";
+export default function App() {
+  return (
+    <main style={{ padding: "2rem", fontFamily: "ui-sans-serif, system-ui, sans-serif", background: "#f8fafc", minHeight: "100vh" }}>
+      <p style={{ margin: 0, color: "#7c3aed", fontSize: "0.8rem", letterSpacing: "0.08em", textTransform: "uppercase" }}>
+        Remote App
+      </p>
+      <h1 style={{ margin: "0.35rem 0 1rem", color: "#1e293b" }}>Profile</h1>
+      <ProfileCard />
+    </main>
+  );
+}
+`,
+  "apps/profile/src/ProfileCard.jsx": `import React from "react";
+export default function ProfileCard() {
+  return (
+    <section>
+      <h2 style={{ marginTop: 0, color: "#1e293b" }}>Federated profile card</h2>
+      <p style={{ color: "#475569" }}>
+        This component is exposed from the profile remote and consumed by the host at runtime.
+      </p>
+      <dl style={{ display: "grid", gridTemplateColumns: "max-content 1fr", gap: "0.5rem 1rem", margin: 0 }}>
+        <dt style={{ color: "#64748b" }}>Owner</dt>
+        <dd style={{ margin: 0, color: "#0f172a" }}>Composable Platform Team</dd>
+        <dt style={{ color: "#64748b" }}>Build</dt>
+        <dd style={{ margin: 0, color: "#0f172a" }}>profile/ProfileCard</dd>
+      </dl>
+    </section>
+  );
+}
+`,
+  "apps/profile/webpack.config.js": `const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { ModuleFederationPlugin } = require("webpack").container;
+const profilePort = Number(process.env.PROFILE_PORT || 3101);
+module.exports = {
+  mode: "development",
+  entry: path.resolve(__dirname, "./src/index.jsx"),
+  output: {
+    publicPath: "http://localhost:" + profilePort + "/",
+    clean: true,
+  },
+  resolve: {
+    extensions: [".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "esbuild-loader",
+          options: {
+            loader: "jsx",
+            jsx: "automatic",
+            target: "es2020",
+          },
+        },
+      },
+    ],
+  },
+  devServer: {
+    port: profilePort,
+    hot: true,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "profile",
+      filename: "remoteEntry.js",
+      exposes: {
+        "./ProfileCard": path.resolve(__dirname, "./src/ProfileCard.jsx"),
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: false },
+        "react-dom": { singleton: true, requiredVersion: false },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "./public/index.html"),
+    }),
+  ],
+};
+`,
+  "apps/checkout/public/index.html": `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Checkout Remote</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`,
+  "apps/checkout/src/index.jsx": `import("./bootstrap");
+`,
+  "apps/checkout/src/bootstrap.jsx": `import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`,
+  "apps/checkout/src/App.jsx": `import React from "react";
+import CheckoutPanel from "./CheckoutPanel";
+export default function App() {
+  return (
+    <main style={{ padding: "2rem", fontFamily: "ui-sans-serif, system-ui, sans-serif", background: "#fff7ed", minHeight: "100vh" }}>
+      <p style={{ margin: 0, color: "#ea580c", fontSize: "0.8rem", letterSpacing: "0.08em", textTransform: "uppercase" }}>
+        Remote App
+      </p>
+      <h1 style={{ margin: "0.35rem 0 1rem", color: "#7c2d12" }}>Checkout</h1>
+      <CheckoutPanel />
+    </main>
+  );
+}
+`,
+  "apps/checkout/src/CheckoutPanel.jsx": `import React from "react";
+export default function CheckoutPanel() {
+  return (
+    <section>
+      <h2 style={{ marginTop: 0, color: "#7c2d12" }}>Federated checkout panel</h2>
+      <p style={{ color: "#9a3412" }}>
+        This remote can evolve independently from the host as long as the public module contract stays stable.
+      </p>
+      <button
+        type="button"
+        style={{
+          border: 0,
+          borderRadius: "999px",
+          background: "#fb923c",
+          color: "#431407",
+          padding: "0.65rem 1rem",
+          fontWeight: 700,
+          cursor: "pointer",
+        }}
+      >
+        Ship order
+      </button>
+    </section>
+  );
+}
+`,
+  "apps/checkout/webpack.config.js": `const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { ModuleFederationPlugin } = require("webpack").container;
+const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
+module.exports = {
+  mode: "development",
+  entry: path.resolve(__dirname, "./src/index.jsx"),
+  output: {
+    publicPath: "http://localhost:" + checkoutPort + "/",
+    clean: true,
+  },
+  resolve: {
+    extensions: [".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "esbuild-loader",
+          options: {
+            loader: "jsx",
+            jsx: "automatic",
+            target: "es2020",
+          },
+        },
+      },
+    ],
+  },
+  devServer: {
+    port: checkoutPort,
+    hot: true,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "checkout",
+      filename: "remoteEntry.js",
+      exposes: {
+        "./CheckoutPanel": path.resolve(__dirname, "./src/CheckoutPanel.jsx"),
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: false },
+        "react-dom": { singleton: true, requiredVersion: false },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "./public/index.html"),
+    }),
+  ],
+};
+`,
+};
 // ── Lab workspace constructors ────────────────────────────────────────────────
 export const DEFAULT_REACT_LAB: FrontendLabWorkspace = {
@@ -225,13 +678,23 @@ export const DEFAULT_NEXTJS_LAB: FrontendLabWorkspace = {
   files: NEXTJS_DEFAULT_FILES,
 };
-export function defaultForType(type: "react" | "nextjs"): FrontendLabWorkspace {
-  return type === "nextjs" ? DEFAULT_NEXTJS_LAB : DEFAULT_REACT_LAB;
+export const DEFAULT_MODULE_FEDERATION_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "Webpack Module Federation Lab",
+  type: "module-federation",
+  activeFile: "apps/host/src/App.jsx",
+  files: MODULE_FEDERATION_DEFAULT_FILES,
+};
+export function defaultForType(type: FrontendLabType): FrontendLabWorkspace {
+  if (type === "nextjs") return DEFAULT_NEXTJS_LAB;
+  if (type === "module-federation") return DEFAULT_MODULE_FEDERATION_LAB;
+  return DEFAULT_REACT_LAB;
 }
 export function cloneFrontendLabWorkspace(
   workspace?: FrontendLabWorkspace | null,
-  type?: "react" | "nextjs",
+  type?: FrontendLabType,
 ): FrontendLabWorkspace {
   const resolvedType = workspace?.type ?? type ?? "react";
   const defaults = defaultForType(resolvedType);
@@ -276,8 +739,12 @@ export function parseFrontendLabWorkspace(
     );
     if (Object.keys(files).length === 0) return null;
-    const type: "react" | "nextjs" =
-      parsed.type === "nextjs" ? "nextjs" : "react";
+    const type: FrontendLabType =
+      parsed.type === "nextjs"
+        ? "nextjs"
+        : parsed.type === "module-federation"
+          ? "module-federation"
+          : "react";
     return cloneFrontendLabWorkspace({
       version: 1,
@@ -304,6 +771,11 @@ export function getEntryFile(workspace: FrontendLabWorkspace): string {
       ? "app/page.tsx"
       : Object.keys(workspace.files)[0];
   }
+  if (workspace.type === "module-federation") {
+    return workspace.files["apps/host/src/App.jsx"]
+      ? "apps/host/src/App.jsx"
+      : Object.keys(workspace.files)[0];
+  }
   return workspace.files["App.tsx"]
     ? "App.tsx"
     : Object.keys(workspace.files)[0];
@@ -313,6 +785,17 @@ export function getEntryFile(workspace: FrontendLabWorkspace): string {
 export function getFrontendLabFileOrder(
   workspace: FrontendLabWorkspace,
 ): string[] {
+  if (workspace.type === "module-federation") {
+    const preferred = ["README.md", "package.json"];
+    const rest = Object.keys(workspace.files)
+      .filter((name) => !preferred.includes(name))
+      .sort((a, b) => {
+        const ad = a.split("/").length;
+        const bd = b.split("/").length;
+        return ad !== bd ? ad - bd : a.localeCompare(b);
+      });
+    return preferred.filter((name) => workspace.files[name]).concat(rest);
+  }
   const allFiles = Object.keys(workspace.files).sort((a, b) => {
     // Sort by folder depth first, then alphabetically
     const ad = a.split("/").length;

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

@@ -212,7 +212,14 @@ interface Store {
     code: string,
     language: string,
     label: string,
-    origin: "user" | "ai" | "sandbox" | "infra" | "react" | "nextjs",
+    origin:
+      | "user"
+      | "ai"
+      | "sandbox"
+      | "infra"
+      | "react"
+      | "nextjs"
+      | "module-federation",
   ) => Promise<import("./types").ContextFile>;
   clearMessages: (questionId: string) => Promise<void>;
@@ -273,7 +280,7 @@ interface Store {
     clientLang: string;
     fileId?: string;
     /** If set, the client panel opens in React or Next.js preview mode instead of script mode */
-    clientType?: "script" | "react" | "nextjs";
+    clientType?: "script" | "react" | "nextjs" | "module-federation";
     reactFiles?: Record<string, string> | null;
     reactActiveFile?: string | null;
   } | null;
@@ -287,7 +294,7 @@ interface Store {
     clientLang: string,
     fileId?: string,
     opts?: {
-      clientType?: "script" | "react" | "nextjs";
+      clientType?: "script" | "react" | "nextjs" | "module-federation";
       reactFiles?: Record<string, string>;
       reactActiveFile?: string;
     },
@@ -311,7 +318,7 @@ interface Store {
   openInfraLab: (workspace?: InfraLabWorkspace, fileId?: string) => void;
   closeInfraLab: () => void;
-  // ── Frontend Labs (React / Next.js) — open inside the sandbox ──
+  // ── Frontend Labs (React / Next.js / Module Federation) — open inside the sandbox ──
   openReactLab: (
     workspace?: FrontendLabWorkspace,
     fileId?: string,
@@ -324,6 +331,12 @@ interface Store {
     serverCode?: string,
     serverLang?: string,
   ) => void;
+  openModuleFederationLab: (
+    workspace?: FrontendLabWorkspace,
+    fileId?: string,
+    serverCode?: string,
+    serverLang?: string,
+  ) => void;
 }
 export const useStore = create<Store>((set, get) => ({
@@ -959,6 +972,24 @@ export const useStore = create<Store>((set, get) => ({
       },
       runnerInitialFileId: null,
     }),
+  openModuleFederationLab: (workspace?, fileId?, serverCode?, serverLang?) =>
+    set({
+      showCodeRunner: true,
+      showInfraLab: false,
+      runnerInitialCode: "",
+      runnerInitialLanguage: "typescript",
+      runnerInitialSandbox: {
+        serverCode: serverCode ?? DEFAULT_SERVER_CODE,
+        serverLang: serverLang ?? "typescript",
+        clientCode: "",
+        clientLang: "javascript",
+        fileId,
+        clientType: "module-federation",
+        reactFiles: workspace?.files ?? null,
+        reactActiveFile: workspace?.activeFile ?? null,
+      },
+      runnerInitialFileId: null,
+    }),
   overwriteContextFileContent: async (questionId, fileId, content) => {
     await api.overwriteContextFileContent(questionId, fileId, content);

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

@@ -5,7 +5,8 @@ export type ContextFileOrigin =
   | "sandbox"
   | "infra"
   | "react"
-  | "nextjs";
+  | "nextjs"
+  | "module-federation";
 export interface ContextFile {
   id: string;
@@ -28,7 +29,7 @@ export interface FrontendLabWorkspace {
   version: 1;
   label: string;
   /** Determines defaults, entry file, and file-tree conventions. */
-  type: "react" | "nextjs";
+  type: "react" | "nextjs" | "module-federation";
   activeFile: string;
   files: Record<string, string>;
 }

package/template/cockpit.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "version": "0.4.0"
+  "version": "0.5.0"
 }

package/template/server/src/google-drive.ts CHANGED Viewed

@@ -360,6 +360,7 @@ export async function syncWorkspace(
                         cs.origin === "sandbox" ||
                         cs.origin === "react" ||
                         cs.origin === "nextjs" ||
+                        cs.origin === "module-federation" ||
                         cs.origin === "infra")
                     ) {
                       try {
@@ -770,6 +771,7 @@ export async function exportWorkspace(
                   cf.origin === "sandbox" ||
                   cf.origin === "react" ||
                   cf.origin === "nextjs" ||
+                  cf.origin === "module-federation" ||
                   cf.origin === "infra"
                 ) {
                   try {