create-interview-cockpit 0.16.0 → 0.17.1

package/template/client/src/reactLab.ts

@@ -342,21 +342,47 @@ This lab uses real webpack 5 + webpack-dev-server + Module Federation.
     "react-router-dom": "^7.6.1"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"
   }
 }
 `,
-  "apps/shared/mfInspector.js": `import React from "react";
+  "apps/host/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`,
+  "apps/shared/mfInspector.ts": `import React from "react";
 import ReactDOM from "react-dom";
 // NOTE: default import (not namespace import) is intentional — namespace objects
 // are never reference-equal across MF consumers even when the singleton is shared,
 // so comparing the default export is the only way to prove same-instance.
 
+// Webpack DefinePlugin / MF globals injected at build time
+declare const __MF_INSPECTOR_APP__: unknown;
+declare const __MF_INSPECTOR_SANDBOX_ID__: unknown;
+declare const __MF_INSPECTOR_DECLARED_CONFIG__: unknown;
+declare const __webpack_init_sharing__: ((scope: string) => Promise<void>) | undefined;
+declare const __webpack_share_scopes__: Record<string, unknown> | undefined;
+
 const app =
   typeof __MF_INSPECTOR_APP__ === "string" ? __MF_INSPECTOR_APP__ : "unknown";
 const sandboxId =
@@ -374,7 +400,7 @@ const runtimeId =
 
 let attachedRouteListeners = false;
 
-function getRoute() {
+function getRoute(): string {
   if (typeof window === "undefined" || !window.location) return "/";
   const route =
     window.location.pathname +
@@ -383,7 +409,7 @@ function getRoute() {
   return route || "/";
 }
 
-function cloneJsonSafe(value) {
+function cloneJsonSafe(value: unknown): unknown {
   if (value == null) return value;
   try {
     return JSON.parse(JSON.stringify(value));
@@ -392,7 +418,7 @@ function cloneJsonSafe(value) {
   }
 }
 
-export async function ensureShareScopeReady() {
+export async function ensureShareScopeReady(): Promise<void> {
   try {
     if (typeof __webpack_init_sharing__ === "function") {
       await __webpack_init_sharing__("default");
@@ -431,7 +457,7 @@ export function snapshotShareScopes() {
   }
 }
 
-export function emitInspectorEvent(kind, payload) {
+export function emitInspectorEvent(kind: string, payload: unknown): void {
   if (!sandboxId || typeof window === "undefined" || !window.parent) return;
   window.parent.postMessage(
     {
@@ -465,7 +491,7 @@ export function emitDeclaredConfig() {
   });
 }
 
-export async function emitRuntimeBoot(label) {
+export async function emitRuntimeBoot(label?: string): Promise<void> {
   attachRouteListeners();
   await ensureShareScopeReady();
   emitDeclaredConfig();
@@ -481,7 +507,7 @@ export async function emitRuntimeBoot(label) {
   });
 }
 
-export async function emitRouteSnapshot(label) {
+export async function emitRouteSnapshot(label?: string): Promise<void> {
   await ensureShareScopeReady();
   emitInspectorEvent("route-change", {
     label: label || "route",
@@ -501,7 +527,11 @@ export function getRemoteInspectorBridge() {
   };
 }
 
-export function makeInspectableLazy(remoteKey, componentLoad, debugLoad) {
+export function makeInspectableLazy<T>(
+  remoteKey: string,
+  componentLoad: () => Promise<T>,
+  debugLoad?: (() => Promise<Record<string, unknown>>) | null,
+): () => Promise<T> {
   return async () => {
     await ensureShareScopeReady();
     emitInspectorEvent("remote-load-start", {
@@ -573,7 +603,9 @@ export function makeInspectableLazy(remoteKey, componentLoad, debugLoad) {
   };
 }
 `,
-  "apps/shared/buildSharedConfig.js": `function createSharedConfig(packageJson) {
+  "apps/shared/buildSharedConfig.js": `
+/** @param {{ dependencies?: Record<string, string> }} packageJson */
+function createSharedConfig(packageJson) {
   const dependencyVersions =
     packageJson && typeof packageJson === "object"
       ? packageJson.dependencies || {}
@@ -611,14 +643,14 @@ export function makeInspectableLazy(remoteKey, componentLoad, debugLoad) {
 
 module.exports = { createSharedConfig };
 `,
-  "apps/host/src/index.jsx": `import("./bootstrap");
+  "apps/host/src/index.tsx": `import("./bootstrap");
 `,
-  "apps/host/src/bootstrap.jsx": `import React from "react";
+  "apps/host/src/bootstrap.tsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import { emitRuntimeBoot } from "../../shared/mfInspector";
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById("root")!);
 
 root.render(
   <React.StrictMode>
@@ -628,7 +660,7 @@ root.render(
 
 void emitRuntimeBoot("host-bootstrap");
 `,
-  "apps/host/src/App.jsx": `import React, { Suspense } from "react";
+  "apps/host/src/App.tsx": `import React, { Suspense } from "react";
 import { makeInspectableLazy } from "../../shared/mfInspector";
 
 const ProfileCard = React.lazy(
@@ -646,7 +678,7 @@ const CheckoutPanel = React.lazy(
   ),
 );
 
-function RemoteBoundary({ title, children }) {
+function RemoteBoundary({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div
       style={{
@@ -720,6 +752,7 @@ const { createSharedConfig } = require("../shared/buildSharedConfig");
 const hostPort = Number(process.env.HOST_PORT || 3100);
 const profilePort = Number(process.env.PROFILE_PORT || 3101);
 const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
+// TypeScript support via esbuild-loader
 const sharedConfig = createSharedConfig(packageJson);
 const remoteConfig = {
   profile: "profile@http://localhost:" + profilePort + "/remoteEntry.js",
@@ -733,24 +766,24 @@ const inspectorConfig = {
 
 module.exports = {
   mode: "development",
-  entry: path.resolve(__dirname, "./src/index.jsx"),
+  entry: path.resolve(__dirname, "./src/index.tsx"),
   output: {
     path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + hostPort + "/",
     clean: true,
   },
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
           options: {
-            loader: "jsx",
+            loader: "tsx",
             jsx: "automatic",
             target: "es2020",
           },
@@ -808,28 +841,47 @@ module.exports = {
     "react-router-dom": "^7.6.1"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"
   }
 }
 `,
-  "apps/profile/src/inspectorBridge.js": `import { getRemoteInspectorBridge } from "../../shared/mfInspector";
+  "apps/profile/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`,
+  "apps/profile/src/inspectorBridge.ts": `import { getRemoteInspectorBridge } from "../../shared/mfInspector";
 
 export { getRemoteInspectorBridge };
 export default getRemoteInspectorBridge;
 `,
-  "apps/profile/src/index.jsx": `import("./bootstrap");
+  "apps/profile/src/index.tsx": `import("./bootstrap");
 `,
-  "apps/profile/src/bootstrap.jsx": `import React from "react";
+  "apps/profile/src/bootstrap.tsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import { emitRuntimeBoot } from "../../shared/mfInspector";
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById("root")!);
 
 root.render(
   <React.StrictMode>
@@ -839,7 +891,7 @@ root.render(
 
 void emitRuntimeBoot("profile-bootstrap");
 `,
-  "apps/profile/src/App.jsx": `import React from "react";
+  "apps/profile/src/App.tsx": `import React from "react";
 import ProfileCard from "./ProfileCard";
 
 export default function App() {
@@ -854,7 +906,7 @@ export default function App() {
   );
 }
 `,
-  "apps/profile/src/ProfileCard.jsx": `import React from "react";
+  "apps/profile/src/ProfileCard.tsx": `import React from "react";
 
 export default function ProfileCard() {
   return (
@@ -883,8 +935,8 @@ const { createSharedConfig } = require("../shared/buildSharedConfig");
 const profilePort = Number(process.env.PROFILE_PORT || 3101);
 const sharedConfig = createSharedConfig(packageJson);
 const exposeConfig = {
-  "./ProfileCard": path.resolve(__dirname, "./src/ProfileCard.jsx"),
-  "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.js"),
+  "./ProfileCard": path.resolve(__dirname, "./src/ProfileCard.tsx"),
+  "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.ts"),
 };
 const inspectorConfig = {
   app: "profile",
@@ -894,24 +946,24 @@ const inspectorConfig = {
 
 module.exports = {
   mode: "development",
-  entry: path.resolve(__dirname, "./src/index.jsx"),
+  entry: path.resolve(__dirname, "./src/index.tsx"),
   output: {
     path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + profilePort + "/",
     clean: true,
   },
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
           options: {
-            loader: "jsx",
+            loader: "tsx",
             jsx: "automatic",
             target: "es2020",
           },
@@ -970,28 +1022,47 @@ module.exports = {
     "react-router-dom": "^7.6.1"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"
   }
 }
 `,
-  "apps/checkout/src/inspectorBridge.js": `import { getRemoteInspectorBridge } from "../../shared/mfInspector";
+  "apps/checkout/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`,
+  "apps/checkout/src/inspectorBridge.ts": `import { getRemoteInspectorBridge } from "../../shared/mfInspector";
 
 export { getRemoteInspectorBridge };
 export default getRemoteInspectorBridge;
 `,
-  "apps/checkout/src/index.jsx": `import("./bootstrap");
+  "apps/checkout/src/index.tsx": `import("./bootstrap");
 `,
-  "apps/checkout/src/bootstrap.jsx": `import React from "react";
+  "apps/checkout/src/bootstrap.tsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import { emitRuntimeBoot } from "../../shared/mfInspector";
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById("root")!);
 
 root.render(
   <React.StrictMode>
@@ -1001,7 +1072,7 @@ root.render(
 
 void emitRuntimeBoot("checkout-bootstrap");
 `,
-  "apps/checkout/src/App.jsx": `import React from "react";
+  "apps/checkout/src/App.tsx": `import React from "react";
 import CheckoutPanel from "./CheckoutPanel";
 
 export default function App() {
@@ -1016,7 +1087,7 @@ export default function App() {
   );
 }
 `,
-  "apps/checkout/src/CheckoutPanel.jsx": `import React from "react";
+  "apps/checkout/src/CheckoutPanel.tsx": `import React from "react";
 
 export default function CheckoutPanel() {
   return (
@@ -1053,8 +1124,8 @@ const { createSharedConfig } = require("../shared/buildSharedConfig");
 const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
 const sharedConfig = createSharedConfig(packageJson);
 const exposeConfig = {
-  "./CheckoutPanel": path.resolve(__dirname, "./src/CheckoutPanel.jsx"),
-  "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.js"),
+  "./CheckoutPanel": path.resolve(__dirname, "./src/CheckoutPanel.tsx"),
+  "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.ts"),
 };
 const inspectorConfig = {
   app: "checkout",
@@ -1064,24 +1135,24 @@ const inspectorConfig = {
 
 module.exports = {
   mode: "development",
-  entry: path.resolve(__dirname, "./src/index.jsx"),
+  entry: path.resolve(__dirname, "./src/index.tsx"),
   output: {
     path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + checkoutPort + "/",
     clean: true,
   },
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
           options: {
-            loader: "jsx",
+            loader: "tsx",
             jsx: "automatic",
             target: "es2020",
           },
@@ -1139,7 +1210,7 @@ export const DEFAULT_MODULE_FEDERATION_LAB: FrontendLabWorkspace = {
   version: 1,
   label: "Webpack Module Federation Lab",
   type: "module-federation",
-  activeFile: "apps/host/src/App.jsx",
+  activeFile: "apps/host/src/App.tsx",
   files: MODULE_FEDERATION_DEFAULT_FILES,
 };
 
@@ -1208,14 +1279,33 @@ In this **isolated** pattern:
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"
   }
 }
+`,
+  "apps/host/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
 `,
   "apps/host/webpack.config.js": `const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { ModuleFederationPlugin } = require("webpack").container;
@@ -1226,19 +1316,19 @@ const MFE_AUTH_PORT = parseInt(process.env.MFE_AUTH_PORT || "3002");
 
 module.exports = {
   mode: "development",
-  entry: "./src/index.js",
+  entry: "./src/index.ts",
   output: {
     publicPath: "auto",
   },
-  resolve: { extensions: [".js", ".jsx"] },
+  resolve: { extensions: [".js", ".jsx", ".ts", ".tsx"] },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
-          options: { loader: "jsx", jsx: "automatic", target: "es2020" },
+          options: { loader: "tsx", jsx: "automatic", target: "es2020" },
         },
       },
     ],
@@ -1288,16 +1378,16 @@ module.exports = {
   </body>
 </html>
 `,
-  "apps/host/src/index.js": `// Async boundary: required for Module Federation dynamic imports
+  "apps/host/src/index.ts": `// Async boundary: required for Module Federation dynamic imports
 import("./bootstrap");
 `,
-  "apps/host/src/bootstrap.jsx": `import React from "react";
+  "apps/host/src/bootstrap.tsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 
-createRoot(document.getElementById("root")).render(<App />);
+createRoot(document.getElementById("root")!).render(<App />);
 `,
-  "apps/host/src/App.jsx": `import React from "react";
+  "apps/host/src/App.tsx": `import React from "react";
 import MfeContainer from "./MfeContainer";
 
 export default function App() {
@@ -1316,18 +1406,30 @@ export default function App() {
   );
 }
 `,
-  "apps/host/src/MfeContainer.jsx": `import React, { useRef, useEffect } from "react";
+  "apps/host/src/MfeContainer.tsx": `import React, { useRef, useEffect } from "react";
+
+interface User {
+  name?: string;
+  role?: string;
+}
+
+interface MfeMount {
+  update?: (props: { user: User }) => void;
+  unmount?: () => void;
+}
 
 // Lazy-load the remote's mount/unmount contract — not a React component.
-const mfeAuthMountPromise = import("mfeAuth/mount");
+const mfeAuthMountPromise = import("mfeAuth/mount") as Promise<{
+  mount: (el: HTMLElement, props: { user: User }) => MfeMount;
+}>;
 
-export default function MfeContainer({ user }) {
-  const elRef = useRef(null);
-  const mountedRef = useRef(null); // holds { unmount } returned by remote
+export default function MfeContainer({ user }: { user: User }) {
+  const elRef = useRef<HTMLDivElement>(null);
+  const mountedRef = useRef<MfeMount | null>(null);
 
   useEffect(() => {
     let cancelled = false;
-    let cleanup = null;
+    let cleanup: MfeMount | null = null;
 
     mfeAuthMountPromise.then(({ mount }) => {
       if (cancelled || !elRef.current) return;
@@ -1340,7 +1442,7 @@ export default function MfeContainer({ user }) {
     return () => {
       cancelled = true;
       // On cleanup, call the remote's own unmount so it can tear down its root.
-      cleanup?.unmount();
+      cleanup?.unmount?.();
     };
   }, []); // mount once — treat like a portal
 
@@ -1379,14 +1481,33 @@ export default function MfeContainer({ user }) {
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"
   }
 }
+`,
+  "apps/mfe-auth/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
 `,
   "apps/mfe-auth/webpack.config.js": `const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { ModuleFederationPlugin } = require("webpack").container;
@@ -1396,19 +1517,19 @@ const MFE_AUTH_PORT = parseInt(process.env.MFE_AUTH_PORT || "3002");
 
 module.exports = {
   mode: "development",
-  entry: "./src/index.js",
+  entry: "./src/index.ts",
   output: {
     publicPath: "auto",
   },
-  resolve: { extensions: [".js", ".jsx"] },
+  resolve: { extensions: [".js", ".jsx", ".ts", ".tsx"] },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
-          options: { loader: "jsx", jsx: "automatic", target: "es2020" },
+          options: { loader: "tsx", jsx: "automatic", target: "es2020" },
         },
       },
     ],
@@ -1420,7 +1541,7 @@ module.exports = {
       exposes: {
         // Key difference: we expose the MOUNT MODULE, not a React component.
         // The host never imports a JSX element from us directly.
-        "./mount": "./src/mount.jsx",
+        "./mount": "./src/mount.tsx",
       },
       // This remote brings its OWN React copy.
       // No singleton sharing with the host here.
@@ -1443,21 +1564,26 @@ module.exports = {
   <body><div id="root"></div></body>
 </html>
 `,
-  "apps/mfe-auth/src/index.js": `import("./bootstrap");
+  "apps/mfe-auth/src/index.ts": `import("./bootstrap");
 `,
-  "apps/mfe-auth/src/bootstrap.jsx": `// Standalone entry — only used when running mfe-auth on its own for development.
+  "apps/mfe-auth/src/bootstrap.tsx": `// Standalone entry — only used when running mfe-auth on its own for development.
 import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 
-createRoot(document.getElementById("root")).render(
+createRoot(document.getElementById("root")!).render(
   <App user={{ name: "Dev User", role: "developer" }} />
 );
 `,
-  "apps/mfe-auth/src/App.jsx": `import React from "react";
+  "apps/mfe-auth/src/App.tsx": `import React from "react";
+
+interface User {
+  name?: string;
+  role?: string;
+}
 
 // Standalone view — used for local development of the MFE in isolation.
-export default function App({ user = {} }) {
+export default function App({ user = {} }: { user?: User }) {
   return (
     <div style={{ padding: "1rem", fontFamily: "system-ui, sans-serif", background: "#0f172a", color: "#e2e8f0", minHeight: "100vh" }}>
       <h2 style={{ color: "#a78bfa", fontSize: "0.9rem", margin: "0 0 0.5rem" }}>
@@ -1469,7 +1595,7 @@ export default function App({ user = {} }) {
 }
 
 // The actual React component that this MFE renders.
-export function AuthWidget({ user = {} }) {
+export function AuthWidget({ user = {} }: { user?: User }) {
   return (
     <div style={{ padding: "0.75rem 1rem", background: "#1e293b", borderRadius: "6px", border: "1px solid #334155" }}>
       <p style={{ margin: 0, fontSize: "0.8rem", color: "#94a3b8" }}>Auth MFE — isolated React root</p>
@@ -1485,8 +1611,8 @@ export function AuthWidget({ user = {} }) {
   );
 }
 `,
-  "apps/mfe-auth/src/mount.jsx": `// ─────────────────────────────────────────────────────────────
-// mount.jsx — the public contract exposed via Module Federation
+  "apps/mfe-auth/src/mount.tsx": `// ─────────────────────────────────────────────────────────────
+// mount.tsx — the public contract exposed via Module Federation
 //
 // The host imports THIS file, not a React component.
 // It calls mount(domElement, props) to render, unmount(domElement) to tear down.
@@ -1500,17 +1626,23 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import { AuthWidget } from "./App";
 
+interface User {
+  name?: string;
+  role?: string;
+}
+
+interface MfeHandle {
+  update: (props: { user?: User }) => void;
+  unmount: () => void;
+}
+
 // Keep track of roots by element so we can update or unmount them.
-const roots = new WeakMap();
+const roots = new WeakMap<HTMLElement, ReturnType<typeof createRoot>>();
 
 /**
  * Mount the MFE into the given DOM element.
- *
- * @param {HTMLElement} el   - the host-provided DOM node
- * @param {object}      props - initial props from the host
- * @returns {{ unmount: () => void, update: (props: object) => void }}
  */
-export function mount(el, props = {}) {
+export function mount(el: HTMLElement, props: { user?: User } = {}): MfeHandle {
   const root = createRoot(el);
   roots.set(el, root);
 
@@ -1518,7 +1650,7 @@ export function mount(el, props = {}) {
 
   return {
     /** Call this to pass updated props from the host without remounting. */
-    update(newProps) {
+    update(newProps: { user?: User }) {
       root.render(<AuthWidget {...newProps} />);
     },
     /** Tear down the React root when the host removes this MFE. */
@@ -1531,9 +1663,8 @@ export function mount(el, props = {}) {
 
 /**
  * Convenience function: unmount using only the element reference.
- * Useful if the host didn't store the return value of mount().
  */
-export function unmount(el) {
+export function unmount(el: HTMLElement): void {
   const root = roots.get(el);
   if (root) {
     root.unmount();
@@ -1547,7 +1678,7 @@ export const ISOLATED_MODULE_FEDERATION_LAB: FrontendLabWorkspace = {
   version: 1,
   label: "Webpack MF — Isolated Mount/Unmount",
   type: "module-federation",
-  activeFile: "apps/mfe-auth/src/mount.jsx",
+  activeFile: "apps/mfe-auth/src/mount.tsx",
   files: MODULE_FEDERATION_ISOLATED_FILES,
 };
 
@@ -1613,10 +1744,12 @@ No \`@module-federation/nextjs-mf\` package is required.
   }
 }
 `,
-  "apps/shell/next.config.js": `/** @type {import('next').NextConfig} */
-const nextConfig = {
+  "apps/shell/next.config.ts": `import type { NextConfig } from 'next';
+// Use webpack's built-in ModuleFederationPlugin — no extra npm package.
+import { container } from 'webpack';
+
+const nextConfig: NextConfig = {
   reactStrictMode: true,
-  // Use webpack's built-in ModuleFederationPlugin — no extra npm package needed.
   webpack(config, { webpack }) {
     config.plugins.push(
       new webpack.container.ModuleFederationPlugin({
@@ -1633,7 +1766,7 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;
 `,
   "apps/shell/src/app/layout.tsx": `import type { Metadata } from 'next';
 import React from 'react';
@@ -1753,8 +1886,9 @@ export function RemoteSlot({ scope, module, remoteUrl, fallback }: Props) {
   }
 }
 `,
-  "apps/remote/next.config.js": `/** @type {import('next').NextConfig} */
-const nextConfig = {
+  "apps/remote/next.config.ts": `import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
   reactStrictMode: true,
   webpack(config, { webpack }) {
     config.plugins.push(
@@ -1775,7 +1909,7 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;
 `,
   "apps/remote/src/app/layout.tsx": `import type { Metadata } from 'next';
 import React from 'react';
@@ -1903,13 +2037,14 @@ Ports are assigned automatically by the lab runner (HOST_PORT for shell, REMOTE_
   }
 }
 `,
-  "apps/shell/next.config.js": `/** @type {import('next').NextConfig} */
-const nextConfig = {
+  "apps/shell/next.config.ts": `import type { NextConfig } from 'next';
+// No federation plugin — the shell loads remotes entirely at runtime.
+
+const nextConfig: NextConfig = {
   reactStrictMode: true,
-  // No federation plugin — the shell loads remotes entirely at runtime.
 };
 
-module.exports = nextConfig;
+export default nextConfig;
 `,
   "apps/shell/src/lib/loadRemoteModule.ts": `// Utility: load a webpack 5 Module Federation container at runtime.
 // Works in any browser environment — no webpack plugin needed on the shell side.
@@ -2014,14 +2149,33 @@ export default function Home() {
     "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"
   }
 }
+`,
+  "apps/remote/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
 `,
   "apps/remote/webpack.config.js": `const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -2031,7 +2185,7 @@ const REMOTE_PORT = Number(process.env.REMOTE_PORT || 3001);
 
 module.exports = {
   mode: 'development',
-  entry: './src/index.js',
+  entry: './src/index.ts',
   output: {
     path: path.resolve(__dirname, 'dist'),
     publicPath: \`http://localhost:\${REMOTE_PORT}/\`,
@@ -2045,7 +2199,7 @@ module.exports = {
         exclude: /node_modules/,
         use: {
           loader: 'esbuild-loader',
-          options: { loader: 'jsx', jsx: 'automatic', target: 'es2020' },
+          options: { loader: 'tsx', jsx: 'automatic', target: 'es2020' },
         },
       },
     ],
@@ -2055,7 +2209,7 @@ module.exports = {
       name: 'myRemote',
       filename: 'remoteEntry.js',
       exposes: {
-        './Widget': './src/Widget.jsx',
+        './Widget': './src/Widget.tsx',
       },
       shared: {
         react: { singleton: true, requiredVersion: false },
@@ -2076,20 +2230,20 @@ module.exports = {
   <body><div id="root"></div></body>
 </html>
 `,
-  "apps/remote/src/index.js": `// Async boundary required for Module Federation
+  "apps/remote/src/index.ts": `// Async boundary required for Module Federation
 import('./bootstrap');
 `,
-  "apps/remote/src/bootstrap.jsx": `import React from 'react';
+  "apps/remote/src/bootstrap.tsx": `import React from 'react';
 import { createRoot } from 'react-dom/client';
 import Widget from './Widget';
 
-createRoot(document.getElementById('root')).render(<Widget />);
+createRoot(document.getElementById('root')!).render(<Widget />);
 `,
-  "apps/remote/src/Widget.jsx": `import React from 'react';
+  "apps/remote/src/Widget.tsx": `import React from 'react';
 
 // This component is exposed at ./Widget via ModuleFederationPlugin.
 // The shell loads it with loadRemoteModule('myRemote', './Widget', url).
-export default function Widget() {
+export default function Widget(): React.ReactElement {
   return (
     <section
       style={{
@@ -2167,10 +2321,10 @@ Each zone deploys independently — the shell never rebuilds when Zone B changes
   }
 }
 `,
-  "apps/shell/next.config.js": `/** @type {import('next').NextConfig} */
+  "apps/shell/next.config.ts": `import type { NextConfig } from 'next';
 // Shell acts as the routing layer.
 // /store and /store/* are proxied to Zone B running at REMOTE_PORT.
-const nextConfig = {
+const nextConfig: NextConfig = {
   async rewrites() {
     const zoneB = 'http://localhost:' + process.env.REMOTE_PORT;
     return [
@@ -2179,7 +2333,7 @@ const nextConfig = {
     ];
   },
 };
-module.exports = nextConfig;
+export default nextConfig;
 `,
   "apps/shell/src/app/layout.tsx": `import type { Metadata } from 'next';
 import React from 'react';
@@ -2229,13 +2383,13 @@ export default function Home() {
   }
 }
 `,
-  "apps/zone-b/next.config.js": `/** @type {import('next').NextConfig} */
+  "apps/zone-b/next.config.ts": `import type { NextConfig } from 'next';
 // basePath makes Zone B serve its pages under /store,
 // matching the path prefix the shell forwards here.
-const nextConfig = {
+const nextConfig: NextConfig = {
   basePath: '/store',
 };
-module.exports = nextConfig;
+export default nextConfig;
 `,
   "apps/zone-b/src/app/layout.tsx": `import type { Metadata } from 'next';
 import React from 'react';
@@ -2272,7 +2426,7 @@ export const NEXTJS_MULTI_ZONES_LAB: FrontendLabWorkspace = {
   version: 1,
   label: "Next.js \u2014 Multi-Zones",
   type: "module-federation",
-  activeFile: "apps/shell/next.config.js",
+  activeFile: "apps/shell/next.config.ts",
   files: NEXTJS_MULTI_ZONES_FILES,
 };
 
@@ -2322,10 +2476,11 @@ This is the recommended safe pattern for consuming federation in the App Router.
   }
 }
 `,
-  "apps/shell/next.config.js": `/** @type {import('next').NextConfig} */
+  "apps/shell/next.config.ts": `import type { NextConfig } from 'next';
 // No webpack hooks needed — federation is handled entirely at runtime
 // inside FederatedWidget.tsx via @module-federation/enhanced/runtime.
-module.exports = {};
+const nextConfig: NextConfig = {};
+export default nextConfig;
 `,
   "apps/shell/tsconfig.json": `{
   "compilerOptions": {
@@ -2430,23 +2585,40 @@ export default function FederatedWidget() {
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5",
+    "typescript": "^5.6.0",
     "webpack": "^5",
     "webpack-cli": "^5",
-    "webpack-dev-server": "^5",
-    "html-webpack-plugin": "^5",
-    "@babel/core": "^7",
-    "@babel/preset-env": "^7",
-    "@babel/preset-react": "^7",
-    "babel-loader": "^9"
+    "webpack-dev-server": "^5"
   }
 }
+`,
+  "apps/mf-remote/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
 `,
   "apps/mf-remote/webpack.config.js": `const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  entry: './src/index.js',
+  entry: './src/index.ts',
   mode: 'development',
   output: {
     path: path.resolve(__dirname, 'dist'),
@@ -2460,21 +2632,21 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
-          loader: 'babel-loader',
-          options: { presets: ['@babel/preset-env', '@babel/preset-react'] },
+          loader: 'esbuild-loader',
+          options: { loader: 'tsx', jsx: 'automatic', target: 'es2020' },
         },
       },
     ],
   },
-  resolve: { extensions: ['.js', '.jsx'] },
+  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
   plugins: [
     new webpack.container.ModuleFederationPlugin({
       name: 'mfRemote',
       filename: 'remoteEntry.js',
-      exposes: { './Widget': './src/exposes/Widget' },
+      exposes: { './Widget': './src/exposes/Widget.tsx' },
       shared: {
         react: { singleton: true, eager: true, requiredVersion: '^19.0.0' },
         'react-dom': { singleton: true, eager: true, requiredVersion: '^19.0.0' },
@@ -2484,18 +2656,18 @@ module.exports = {
   ],
 };
 `,
-  "apps/mf-remote/src/index.js": `// Remote bootstrap page. MF consumers load ./Widget via remoteEntry.js.
-document.getElementById('root').innerHTML =
+  "apps/mf-remote/src/index.ts": `// Remote bootstrap page. MF consumers load ./Widget via remoteEntry.js.
+document.getElementById('root')!.innerHTML =
   '<div style="padding:2rem;font-family:system-ui">' +
   '<h2>mfRemote \u2014 running</h2>' +
   '<p>Exposes <code>mfRemote/Widget</code> via Module Federation.</p>' +
   '</div>';
 `,
-  "apps/mf-remote/src/exposes/Widget.jsx": `import React from 'react';
+  "apps/mf-remote/src/exposes/Widget.tsx": `import React from 'react';
 
 // Exposed as mfRemote/Widget via ModuleFederationPlugin.
 // The shell loads this at runtime via @module-federation/enhanced/runtime.
-export default function Widget() {
+export default function Widget(): React.ReactElement {
   return (
     <section style={{
       padding: '1rem', border: '1px solid #e2e8f0',
@@ -2563,14 +2735,33 @@ still work \u2014 here a plain webpack remote is used for simplicity.
   },
   "devDependencies": {
     "@rspack/core": "latest",
-    "@rspack/cli": "latest"
+    "@rspack/cli": "latest",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.6.0"
   }
 }
+`,
+  "apps/rspack-shell/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
 `,
   "apps/rspack-shell/rspack.config.js": `const rspack = require('@rspack/core');
 
 module.exports = {
-  entry: './src/index.jsx',
+  entry: './src/index.tsx',
   mode: 'development',
   output: { publicPath: 'auto' },
   devServer: {
@@ -2578,16 +2769,17 @@ module.exports = {
     port: parseInt(process.env.HOST_PORT, 10) || 3000,
     hot: true,
   },
-  resolve: { extensions: ['.js', '.jsx'] },
+  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         // Rspack ships a built-in SWC loader — no Babel or extra packages needed.
+        // Use 'typescript' syntax to handle .ts/.tsx files.
         loader: 'builtin:swc-loader',
         options: {
           jsc: {
-            parser: { syntax: 'ecmascript', jsx: true },
+            parser: { syntax: 'typescript', tsx: true },
             transform: { react: { runtime: 'automatic' } },
           },
         },
@@ -2627,19 +2819,30 @@ module.exports = {
 </body>
 </html>
 `,
-  "apps/rspack-shell/src/index.jsx": `import { createRoot } from 'react-dom/client';
+  "apps/rspack-shell/src/mf.d.ts": `// Type declarations for Module Federation remotes.
+// Rspack resolves these at runtime — TypeScript needs a fallback declaration.
+declare module 'mfRemote/Widget' {
+  import type { ComponentType } from 'react';
+  const Widget: ComponentType;
+  export default Widget;
+}
+`,
+  "apps/rspack-shell/src/index.tsx": `import React from 'react';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-// Rspack's SWC loader handles JSX via builtin:swc-loader (no Babel needed).
-createRoot(document.getElementById('root')).render(<App />);
+// Rspack's SWC loader handles TSX via builtin:swc-loader (no Babel needed).
+createRoot(document.getElementById('root')!).render(<App />);
 `,
-  "apps/rspack-shell/src/App.jsx": `import React, { Suspense, lazy } from 'react';
+  "apps/rspack-shell/src/App.tsx": `import React, { Suspense, lazy } from 'react';
+import type { ComponentType } from 'react';
 
 // mfRemote is declared in rspack.config.js under remotes.
 // Rspack resolves this lazy import to the federated container at runtime.
-const RemoteWidget = lazy(() => import('mfRemote/Widget'));
+// The type declaration is in src/mf.d.ts.
+const RemoteWidget = lazy<ComponentType>(() => import('mfRemote/Widget'));
 
-export default function App() {
+export default function App(): React.ReactElement {
   return (
     <main style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
       <h1>Rspack Shell</h1>
@@ -2663,16 +2866,33 @@ export default function App() {
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5",
+    "typescript": "^5.6.0",
     "webpack": "^5",
     "webpack-cli": "^5",
-    "webpack-dev-server": "^5",
-    "html-webpack-plugin": "^5",
-    "@babel/core": "^7",
-    "@babel/preset-env": "^7",
-    "@babel/preset-react": "^7",
-    "babel-loader": "^9"
+    "webpack-dev-server": "^5"
   }
 }
+`,
+  "apps/webpack-remote/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
 `,
   "apps/webpack-remote/webpack.config.js": `const path = require('path');
 const webpack = require('webpack');
@@ -2693,21 +2913,21 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
-          loader: 'babel-loader',
-          options: { presets: ['@babel/preset-env', '@babel/preset-react'] },
+          loader: 'esbuild-loader',
+          options: { loader: 'tsx', jsx: 'automatic', target: 'es2020' },
         },
       },
     ],
   },
-  resolve: { extensions: ['.js', '.jsx'] },
+  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
   plugins: [
     new webpack.container.ModuleFederationPlugin({
       name: 'mfRemote',
       filename: 'remoteEntry.js',
-      exposes: { './Widget': './src/exposes/Widget' },
+      exposes: { './Widget': './src/exposes/Widget.tsx' },
       shared: {
         react: { singleton: true, eager: true, requiredVersion: '^18.0.0' },
         'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' },
@@ -2724,10 +2944,10 @@ document.getElementById('root').innerHTML =
   '<p>Exposes <code>mfRemote/Widget</code> via Module Federation.</p>' +
   '</div>';
 `,
-  "apps/webpack-remote/src/exposes/Widget.jsx": `import React from 'react';
+  "apps/webpack-remote/src/exposes/Widget.tsx": `import React from 'react';
 
 // Exposed as mfRemote/Widget. The Rspack shell loads this via lazy import.
-export default function Widget() {
+export default function Widget(): React.ReactElement {
   return (
     <section style={{
       padding: '1rem', border: '1px solid #e2e8f0',
@@ -2843,9 +3063,11 @@ export function getEntryFile(workspace: FrontendLabWorkspace): string {
       : 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["apps/host/src/App.tsx"]
+      ? "apps/host/src/App.tsx"
+      : workspace.files["apps/host/src/App.jsx"]
+        ? "apps/host/src/App.jsx"
+        : Object.keys(workspace.files)[0];
   }
   return workspace.files["main.tsx"]
     ? "main.tsx"