create-wakii-stack 0.0.0-stage → 0.1.1

package/stack-template/app/shell/tests/remote-slot.test.tsx

@@ -0,0 +1,109 @@
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { RemoteSlot } from '../src/components/RemoteSlot';
+
+// Mock fe-shared loadRemoteModule — test KHÔNG load remote thật (SF-6 sở hữu remote)
+const loadRemoteModuleMock = vi.hoisted(() => vi.fn());
+vi.mock('@wakii/fe-shared', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@wakii/fe-shared')>();
+  return { ...actual, loadRemoteModule: loadRemoteModuleMock };
+});
+
+afterEach(() => {
+  cleanup();
+  loadRemoteModuleMock.mockReset();
+});
+
+describe('RemoteSlot (error boundary remote-down)', () => {
+  it('remote load fail → hiện fallback + nút thử lại, không crash app', async () => {
+    loadRemoteModuleMock.mockRejectedValue(new Error('Remote "tasks" load failed'));
+    render(<RemoteSlot name="tasks" exposedModule="./TasksPage" />);
+
+    const alert = await screen.findByRole('alert');
+    expect(alert).toHaveTextContent('Không tải được phần tasks');
+    expect(screen.getByRole('button', { name: 'Thử lại' })).toBeInTheDocument();
+  });
+
+  it('bấm thử lại → gọi load lại remote; thành công → render nội dung', async () => {
+    const user = userEvent.setup();
+    loadRemoteModuleMock.mockRejectedValueOnce(new Error('down'));
+    loadRemoteModuleMock.mockResolvedValueOnce({ default: () => <div>TASKS-CONTENT</div> });
+
+    render(<RemoteSlot name="tasks" exposedModule="./TasksPage" />);
+    await screen.findByRole('alert');
+    await user.click(screen.getByRole('button', { name: 'Thử lại' }));
+
+    await waitFor(() => {
+      expect(screen.getByText('TASKS-CONTENT')).toBeInTheDocument();
+    });
+    expect(loadRemoteModuleMock).toHaveBeenCalledTimes(2);
+  });
+
+  it('remote load thành công ngay → render nội dung, không fallback', async () => {
+    loadRemoteModuleMock.mockResolvedValue({ default: () => <div>ACTIVITY-CONTENT</div> });
+    render(<RemoteSlot name="activity" exposedModule="./ActivityPage" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('ACTIVITY-CONTENT')).toBeInTheDocument();
+    });
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('đang tải → Suspense fallback là Skeleton (aria-busy), KHÔNG còn text "Đang tải…" (SF-2)', () => {
+    loadRemoteModuleMock.mockReturnValue(new Promise(() => {})); // never resolves
+    const { container } = render(<RemoteSlot name="tasks" exposedModule="./TasksPage" />);
+
+    expect(container.querySelector('[aria-busy="true"]')).toBeInTheDocument();
+    expect(screen.queryByText('Đang tải tasks…')).not.toBeInTheDocument();
+  });
+
+  it('re-render (click lại nav link đang đứng) KHÔNG load lại remote (lazy cache — P2 review fix)', async () => {
+    loadRemoteModuleMock.mockResolvedValue({ default: () => <div>STABLE</div> });
+    const { rerender } = render(
+      <RemoteSlot name="tasks" exposedModule="./TasksPage" key="x" />,
+    );
+    await waitFor(() => expect(screen.getByText('STABLE')).toBeInTheDocument());
+    expect(loadRemoteModuleMock).toHaveBeenCalledTimes(1);
+
+    // re-render cùng props — lazy cache phải giữ component type, không import lại
+    rerender(<RemoteSlot name="tasks" exposedModule="./TasksPage" key="x" />);
+    expect(loadRemoteModuleMock).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('STABLE')).toBeInTheDocument();
+  });
+
+  it('BUG-2: bấm thử lại sau khi remote sống lại → recovery in-place (cờ retry bust sticky layer)', async () => {
+    const user = userEvent.setup();
+    // Mini-model sticky rejection: load fail NHỚ BÊN — chỉ lần gọi MANG CỜ retry
+    // (registerRemotes force bên dưới fe-shared) mới phá được sticky layer.
+    // RemoteSlot cũ không truyền cờ → retry nhận lại rejection cũ → fallback mãi mãi.
+    let sticky = true;
+    const stickyLoad = (opts?: { retry?: boolean }) => {
+      if (opts?.retry) sticky = false;
+      return sticky
+        ? Promise.reject(new Error('Remote "tasks" load failed'))
+        : Promise.resolve({ default: () => <div>TASKS-CONTENT</div> });
+    };
+    loadRemoteModuleMock.mockImplementation((...args: unknown[]) =>
+      stickyLoad(args[2] as { retry?: boolean } | undefined),
+    );
+
+    render(<RemoteSlot name="tasks" exposedModule="./TasksPage" />);
+    await screen.findByRole('alert');
+
+    // Pin contract: lần đầu (attempt 0) KHÔNG được mang cờ — initial load không reset
+    // cache runtime (nếu có regression truyền cờ mọi attempt, test này bắt tại đây).
+    expect(loadRemoteModuleMock).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({ name: 'tasks' }),
+      './TasksPage',
+      undefined,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Thử lại' }));
+
+    await waitFor(() => {
+      expect(screen.getByText('TASKS-CONTENT')).toBeInTheDocument();
+    });
+  });
+});

package/stack-template/app/shell/tests/remote-urls.test.ts

@@ -0,0 +1,26 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { resolveRemoteUrl } from '@wakii/fe-shared';
+// F1 (review VU-53 follow-up): host CHƯA BAO GIỜ inject __REMOTE_URLS__ dù docstring
+// fe-shared thiết kế vậy — retry BUG-2 (registerRemotes force) re-register remoteEntry
+// với resolveRemoteUrl() → fallback '/remotes/<name>/remoteEntry.js' SAI trong dev-native
+// (shell :3000 không serve /remotes/* — devServer chỉ proxy /api/*) → 404 vĩnh viễn,
+// retry thay sticky-rejection cũ bằng wrong-URL rejection. Fix: host nạp build-time env
+// (DefinePlugin __REMOTE_TASKS_URL__/__REMOTE_ACTIVITY_URL__) vào __REMOTE_URLS__.
+import { registerBuildtimeRemoteUrls } from '../src/remote-urls';
+
+afterEach(() => {
+  delete (globalThis as Record<string, unknown>)['__REMOTE_URLS__'];
+});
+
+describe('registerBuildtimeRemoteUrls (retry phải dùng đúng url webpack đã đăng ký)', () => {
+  it('nạp __REMOTE_URLS__ từ build-time define → resolveRemoteUrl trả ĐÚNG url đó', () => {
+    registerBuildtimeRemoteUrls();
+    // giá trị define trong vitest.config.mô phỏng DefinePlugin build-time
+    expect(resolveRemoteUrl('tasks')).toBe('http://buildtime:4001/remoteEntry.js');
+    expect(resolveRemoteUrl('activity')).toBe('http://buildtime:4002/remoteEntry.js');
+  });
+
+  it('KHÔNG đăng ký → resolveRemoteUrl giữ fallback prod (qua gateway conventions/08)', () => {
+    expect(resolveRemoteUrl('tasks')).toBe('/remotes/tasks/remoteEntry.js');
+  });
+});

package/stack-template/app/shell/tests/setup.ts

@@ -0,0 +1,15 @@
+import '@testing-library/jest-dom/vitest';
+
+// jsdom thiếu matchMedia — thêm no-op nếu test cần (thêm thuộc tính thiếu của MediaQueryList)
+if (!window.matchMedia) {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia;
+}

package/stack-template/app/shell/tests/shell-chrome.test.tsx

@@ -0,0 +1,126 @@
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { AppRoutes } from '../src/App';
+import { Layout } from '../src/components/Layout';
+
+// Shell chrome (SF-2): nav active state + brand + HomePage dashboard.
+// A11y baseline (skip link/focus) đã có a11y.test.tsx — file này chỉ surface mới.
+
+afterEach(() => {
+  cleanup();
+  window.localStorage.clear();
+  vi.unstubAllGlobals();
+});
+
+describe('NavBar active state', () => {
+  it('link của route đang đứng có aria-current="page", link khác không', () => {
+    render(
+      <MemoryRouter initialEntries={['/tasks']}>
+        <Layout />
+      </MemoryRouter>,
+    );
+    expect(screen.getByRole('link', { name: 'Tasks' })).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('link', { name: 'Trang chủ' })).not.toHaveAttribute('aria-current');
+    expect(screen.getByRole('link', { name: 'Activity' })).not.toHaveAttribute('aria-current');
+  });
+
+  it('đổi route → active chuyển theo (Trang chủ active ở "/")', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Layout />
+      </MemoryRouter>,
+    );
+    expect(screen.getByRole('link', { name: 'Trang chủ' })).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('link', { name: 'Tasks' })).not.toHaveAttribute('aria-current');
+  });
+
+  it('nav hiển thị brand Boilerplate', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Layout />
+      </MemoryRouter>,
+    );
+    expect(screen.getByText('Boilerplate')).toBeInTheDocument();
+  });
+
+  it('token thiếu email claim → nav KHÔNG crash, avatar hiện "?" (review P2)', () => {
+    const b64 = (o: object) => btoa(JSON.stringify(o)).replace(/=+$/, '');
+    window.localStorage.setItem(
+      'bp.jwt',
+      `${b64({ alg: 'HS256' })}.${b64({ sub: 'u1', exp: Math.floor(Date.now() / 1000) + 3600 })}.sig`,
+    );
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    );
+    expect(screen.queryByTestId('nav-user')).toBeInTheDocument();
+    expect(screen.getByTestId('nav-user')).toHaveTextContent('?');
+  });
+});
+
+describe('HomePage dashboard', () => {
+  it('giữ h1 "Trang chủ" + quick links Tasks/Activity (card riêng ngoài nav)', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    );
+    expect(screen.getByRole('heading', { name: 'Trang chủ' })).toBeInTheDocument();
+    // nav + quick-link card = ≥2 link cùng tên (nav link giữ exact name cho test cũ)
+    expect(screen.getAllByRole('link', { name: /Tasks/ }).length).toBeGreaterThanOrEqual(2);
+    expect(screen.getAllByRole('link', { name: /Activity/ }).length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('demo hints đọc được: alice@demo.local + fail@demo.local (saga 4b)', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    );
+    expect(screen.getByText(/alice@demo\.local/)).toBeInTheDocument();
+    expect(screen.getByText(/fail@demo\.local/)).toBeInTheDocument();
+  });
+});
+
+describe('NavBar logout qua wrapper refresh-client (SF-4)', () => {
+  it('Đăng xuất → POST /api/auth/logout + cả 2 key sạch + về login', async () => {
+    const user = userEvent.setup();
+    const b64 = (o: object) => btoa(JSON.stringify(o)).replace(/=+$/, '');
+    window.localStorage.setItem(
+      'bp.jwt',
+      `${b64({ alg: 'HS256' })}.${b64({ sub: 'u1', email: 'alice@demo.local', roles: ['admin'], exp: Math.floor(Date.now() / 1000) + 3600 })}.sig`,
+    );
+    window.localStorage.setItem('bp.rt', 'rt-1');
+    const fetchMock = vi.fn((input: RequestInfo | URL, init?: RequestInit) =>
+      String(input) === '/api/auth/logout'
+        ? Promise.resolve(new Response(null, { status: 204 }))
+        : Promise.resolve(new Response('{}', { status: 200 })),
+    );
+    vi.stubGlobal('fetch', fetchMock);
+
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId('nav-user')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Đăng xuất' }));
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+    expect(String(fetchMock.mock.calls[0][0])).toBe('/api/auth/logout');
+    expect(JSON.parse(String(fetchMock.mock.calls[0][1]?.body))).toEqual({ refreshToken: 'rt-1' });
+    expect(window.localStorage.getItem('bp.jwt')).toBeNull();
+    expect(window.localStorage.getItem('bp.rt')).toBeNull();
+    // về login + nav không còn user chip
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Đăng nhập' })).toBeInTheDocument();
+    });
+    expect(screen.queryByTestId('nav-user')).not.toBeInTheDocument();
+  });
+});

package/stack-template/app/shell/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
+    // fe-shared src/ui (SF-1) import 'react' nhưng package không khai báo dep (giữ
+    // pnpm-lock.yaml) — TS map types về node_modules của consumer (đối xứng với
+    // resolve.modules trong rspack.config.mjs / alias trong vitest.config.ts)
+    "baseUrl": ".",
+    "paths": {
+      "react": ["node_modules/@types/react"],
+      "react/jsx-runtime": ["node_modules/@types/react/jsx-runtime"]
+    }
+  },
+  "include": ["src", "tests", "rspack.config.mjs", "vitest.config.ts"]
+}

package/stack-template/app/shell/vitest.config.ts

@@ -0,0 +1,42 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+// Windows-safe absolute path (URL.pathname cho ra /C:/... sai trên win32)
+const rootDir = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  // Stub build-time env (rspack DefinePlugin) cho unit test — test mock fetch nên base rỗng;
+  // remote URLs stub giá trị "buildtime" để remote-urls.test khẳng định đường inject
+  define: {
+    __API_BASE_URL__: "''",
+    __REMOTE_TASKS_URL__: "'http://buildtime:4001/remoteEntry.js'",
+    __REMOTE_ACTIVITY_URL__: "'http://buildtime:4002/remoteEntry.js'",
+  },
+  resolve: {
+    // fe-shared src/ui (SF-1) import 'react' nhưng package không khai báo dep (giữ
+    // pnpm-lock.yaml) — vitest resolve từ file fe-shared không thấy react của shell.
+    // Alias về node_modules của shell: catalog 19.3.0 pinned giống hệt ×3 package.
+    alias: {
+      react: path.resolve(rootDir, 'node_modules/react'),
+      'react-dom': path.resolve(rootDir, 'node_modules/react-dom'),
+      'react/jsx-runtime': path.resolve(rootDir, 'node_modules/react/jsx-runtime'),
+    },
+  },
+  // JSX fe-shared (không tsconfig riêng) phải transform automatic runtime — không thì
+  // esbuild rơi về classic "React.createElement" → "React is not defined" lúc render
+  esbuild: {
+    jsx: 'automatic',
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./tests/setup.ts'],
+    coverage: {
+      provider: 'v8',
+      include: ['src/**'], // config/stories ngoài scope test
+      // ngưỡng = hiện trạng −headroom — chống coverage rơi tự do (chỉ tiêu duyệt 2026-10-17)
+      thresholds: { lines: 90, statements: 90, functions: 80, branches: 90 },
+    },
+  },
+});

package/stack-template/app/spike/README.md

@@ -0,0 +1,35 @@
+# app/spike — MF/Rspack spike (SF-1)
+
+Mục đích: chứng minh **React 19 + @module-federation/enhanced + Rspack** load được host → remote, để **pin version có căn cứ** (không bịa) trước khi SF-5/6 build shell/remotes thật. Xoá/sửa được sau khi SF-5 re-validate — KHÔNG phải production code.
+
+## Kết quả — ĐÃ TEST THẬT 2026-10-12
+
+- ✅ Host (`:3000`) dynamic-import được exposed module `./Hello` từ remote (`:4001/remoteEntry.js`).
+- ✅ Evidence: `docs/superpowers/evidence/sf-1-mf-spike-host.png` (screenshot browser thật).
+- Versions pin: trường `mfToolkit.pinned` trong `app/shared/package.json` — react 19.3.0, react-dom 19.3.0, @rspack/core + @rspack/cli 1.7.12, @module-federation/enhanced 0.21.6.
+
+## Learned (2 pitfall — SF-5/6 tránh lặp)
+
+1. **Host entry cần async boundary**: entry chỉ được `import('./bootstrap.jsx')` — KHÔNG import shared dep (react/react-dom) tĩnh ở entry, ngược lại lỗi `Invalid loadShareSync function call from runtime #RUNTIME-006`.
+2. **JSX automatic runtime**: `builtin:swc-loader` phải set `jsc.transform.react.runtime = 'automatic'` — classic runtime biên dịch `React.createElement` mà không tự import React → `React is not defined`.
+
+## Chạy lại spike
+
+```bash
+# từ root repo (workspace đã include app/spike/*)
+pnpm install
+cd app/spike/remote && pnpm build   # dist + remoteEntry.js
+cd ../host && pnpm build && cp index.html dist/
+# serve 2 dist (0-dep server kèm sẵn, CORS mở):
+cd .. && node serve.mjs remote/dist 4001 &
+node serve.mjs host/dist 3000 &
+# mở http://localhost:3000/index.html → thấy "✅ Hello from spike_remote"
+```
+
+## Cấu trúc
+
+```
+remote/  — MF remote, expose ./Hello, remoteEntry.js trên :4001
+host/    — MF host, dynamic import('spike_remote/Hello'), trang trên :3000
+serve.mjs— static server 0-dep (CORS *) cho 2 dist
+```

package/stack-template/app/spike/host/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>SF-1 MF spike — host</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./main.js"></script>
+  </body>
+</html>

package/stack-template/app/spike/host/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@wakii/spike-host",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Spike SF-1 — MF host hello-world load spike_remote. Pin versions đã test thật vào app/shared/package.json mfToolkit.",
+  "type": "module",
+  "scripts": {
+    "build": "rspack build"
+  },
+  "devDependencies": {
+    "@module-federation/enhanced": "^0.21.0",
+    "@rspack/cli": "^1.6.0",
+    "@rspack/core": "^1.6.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}

package/stack-template/app/spike/host/rspack.config.mjs

@@ -0,0 +1,34 @@
+import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+
+/** Spike host — load spike_remote từ http://localhost:4001/remoteEntry.js (conventions/05). */
+export default {
+  entry: './src/index.jsx',
+  output: { publicPath: '/' },
+  resolve: { extensions: ['.jsx', '.js'] },
+  module: {
+    rules: [
+      {
+        test: /\.jsx$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: { parser: { syntax: 'ecmascript', jsx: true }, transform: { react: { runtime: 'automatic' } } },
+          },
+        },
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'spike_host',
+      remotes: {
+        spike_remote: 'spike_remote@http://localhost:4001/remoteEntry.js',
+      },
+      shared: {
+        react: { singleton: true },
+        'react-dom': { singleton: true },
+      },
+    }),
+  ],
+};

package/stack-template/app/spike/host/src/bootstrap.jsx

@@ -0,0 +1,26 @@
+// App bootstrap — mọi import shared (react/react-dom) đặt SAU async boundary ở index.jsx
+window.addEventListener('error', (e) => {
+  document.getElementById('app').innerHTML = '❌ BOOT ERROR: ' + e.message;
+});
+
+import('react-dom/client')
+  .then(({ createRoot }) => {
+    const root = createRoot(document.getElementById('app'));
+    root.render(<div style={{ padding: 24 }}>host booting…</div>);
+
+    import('spike_remote/Hello')
+      .then(({ default: Hello }) => {
+        root.render(<Hello />);
+      })
+      .catch((err) => {
+        root.render(
+          <div style={{ padding: 24, color: 'crimson', fontFamily: 'monospace' }}>
+            ❌ REMOTE LOAD FAILED: {String(err && err.message ? err.message : err)}
+          </div>
+        );
+      });
+  })
+  .catch((err) => {
+    document.getElementById('app').innerHTML =
+      '❌ REACT LOAD FAILED: ' + String(err && err.message ? err.message : err);
+  });

package/stack-template/app/spike/host/src/index.jsx

@@ -0,0 +1,3 @@
+// Async boundary bắt buộc cho MF shared non-eager — entry KHÔNG được import shared dep tĩnh
+// (lỗi RUNTIME-006 loadShareSync nếu vi phạm — spike learned 2026-10-12)
+import('./bootstrap.jsx');

package/stack-template/app/spike/remote/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@wakii/spike-remote",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Spike SF-1 — MF remote hello-world. Mục đích: pin versions React19+MF+Rspack đã test thật. Xoá được sau khi SF-5/6 re-validate.",
+  "type": "module",
+  "scripts": {
+    "build": "rspack build"
+  },
+  "devDependencies": {
+    "@module-federation/enhanced": "^0.21.0",
+    "@rspack/cli": "^1.6.0",
+    "@rspack/core": "^1.6.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}

package/stack-template/app/spike/remote/rspack.config.mjs

@@ -0,0 +1,36 @@
+import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+
+/** Spike remote — expose ./Hello. Port 4001 theo conventions/05 (remote dev port). */
+export default {
+  entry: './src/index.js',
+  output: {
+    // publicPath tuyệt đối — runtime chunk fetch về đúng origin remote
+    publicPath: 'http://localhost:4001/',
+  },
+  resolve: { extensions: ['.jsx', '.js'] },
+  module: {
+    rules: [
+      {
+        test: /\.jsx$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: { parser: { syntax: 'ecmascript', jsx: true }, transform: { react: { runtime: 'automatic' } } },
+          },
+        },
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'spike_remote',
+      filename: 'remoteEntry.js',
+      exposes: { './Hello': './src/Hello.jsx' },
+      shared: {
+        react: { singleton: true },
+        'react-dom': { singleton: true },
+      },
+    }),
+  ],
+};

package/stack-template/app/spike/remote/src/Hello.jsx

@@ -0,0 +1,7 @@
+export default function Hello() {
+  return (
+    <div style={{ padding: 24, fontFamily: 'system-ui, sans-serif', fontSize: 18 }}>
+      ✅ Hello from <b>spike_remote</b> — loaded via Module Federation on Rspack (React 19)
+    </div>
+  );
+}

package/stack-template/app/spike/remote/src/index.js

@@ -0,0 +1,2 @@
+// Entry tối thiểu — MF chỉ cần 1 entry để build remoteEntry.js
+export {};

package/stack-template/app/spike/serve.mjs

@@ -0,0 +1,31 @@
+// Static server 0-dep cho spike (CORS mở — host :3000 fetch remoteEntry cross-origin :4001)
+// Usage: node serve.mjs <dir> <port>
+import { createServer } from 'node:http';
+import { readFile } from 'node:fs/promises';
+import { extname, join, normalize } from 'node:path';
+
+const dir = process.argv[2];
+const port = Number(process.argv[3]);
+const MIME = {
+  '.js': 'application/javascript',
+  '.html': 'text/html',
+  '.json': 'application/json',
+};
+
+createServer(async (req, res) => {
+  try {
+    const urlPath = decodeURIComponent(new URL(req.url, 'http://x').pathname);
+    let file = join(dir, normalize(urlPath).replace(/^([/\\])+/, ''));
+    if (urlPath.endsWith('/')) file = join(file, 'index.html');
+    const body = await readFile(file);
+    res.writeHead(200, {
+      'Content-Type': MIME[extname(file)] ?? 'application/octet-stream',
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Headers': '*',
+    });
+    res.end(body);
+  } catch {
+    res.writeHead(404, { 'Access-Control-Allow-Origin': '*' });
+    res.end('not found');
+  }
+}).listen(port, () => console.log(`spike static: ${dir} → http://localhost:${port}`));