Lab shell, catalog và cart

type CommandResult =
  | { ok: true }
  | {
      ok: false;
      code:
        | 'INVALID_QUANTITY'
        | 'UNKNOWN_SKU'
        | 'NOT_FOUND'
        | 'SERVICE_UNAVAILABLE';
      message: string;
    };

type CartSnapshot = {
  revision: number;
  lines: readonly {
    sku: string;
    name: string;
    unitPrice: number;
    quantity: number;
  }[];
  summary: {
    totalQuantity: number;
    subtotal: number; // Số nguyên VND, chưa có thuế hoặc vận chuyển.
  };
};

// API ngoài các command:
// getSnapshot(): CartSnapshot
// subscribe(listener: () => void): () => void

REACT_VERSION=$(node -p "require('./apps/shell/package.json').dependencies.react")
REACT_DOM_VERSION=$(node -p "require('./apps/shell/package.json').dependencies['react-dom']")
npm install --save-exact "react@$REACT_VERSION" "react-dom@$REACT_DOM_VERSION" --workspace=@shop/cart
npm install --save-dev --save-exact @babel/core@7 @babel/preset-react@7 babel-loader@9 --workspace=@shop/cart
npm ls react react-dom --workspace=@shop/shell --workspace=@shop/catalog --workspace=@shop/cart

const products = new Map([
  ['ao-thun-den', { sku: 'ao-thun-den', name: 'Áo thun đen', unitPrice: 150000 }],
  ['tui-vai', { sku: 'tui-vai', name: 'Túi vải', unitPrice: 80000 }],
  ['binh-nuoc', { sku: 'binh-nuoc', name: 'Bình nước', unitPrice: 120000 }],
]);

export async function resolveProduct(sku) {
  return products.get(sku) ?? null;
}

import { resolveProduct as defaultResolver } from './products.js';

export const apiVersion = 1;
const MAX_QUANTITY = 99;
const fail = (code, message) => ({ ok: false, code, message });
const validQuantity = (value) =>
  Number.isInteger(value) && value >= 1 && value <= MAX_QUANTITY;

export function createCartController({ resolveProduct = defaultResolver } = {}) {
  let lines = [];
  let revision = 0;
  const listeners = new Set();
  let tail = Promise.resolve();

  function makeSnapshot() {
    const frozenLines = Object.freeze(
      lines.map((line) => Object.freeze({ ...line })),
    );
    return Object.freeze({
      revision,
      lines: frozenLines,
      summary: Object.freeze({
        totalQuantity: lines.reduce((sum, line) => sum + line.quantity, 0),
        subtotal: lines.reduce(
          (sum, line) => sum + line.unitPrice * line.quantity, 0,
        ),
      }),
    });
  }

  let snapshot = makeSnapshot();

  function publish(nextLines) {
    lines = nextLines;
    revision += 1;
    snapshot = makeSnapshot();
    for (const listener of [...listeners]) {
      // Lỗi consumer không biến một mutation đã commit thành thất bại.
      try {
        listener();
      } catch (error) {
        console.error('Cart subscriber bị lỗi.', error);
      }
    }
  }

  function enqueue(work) {
    const result = tail.then(work).catch((error) => {
      console.error('Cart command bị lỗi.', error);
      return fail('SERVICE_UNAVAILABLE', 'Chưa cập nhật được giỏ. Hãy thử lại.');
    });
    tail = result.then(() => undefined);
    return result;
  }

  const invalidQuantity = () =>
    fail('INVALID_QUANTITY', 'Số lượng mỗi dòng phải là số nguyên từ 1 đến 99.');

  return Object.freeze({
    apiVersion,
    getSnapshot: () => snapshot,
    subscribe(listener) {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },
    addItem({ sku, quantity }) {
      return enqueue(async () => {
        if (!validQuantity(quantity)) return invalidQuantity();
        const product = await resolveProduct(sku);
        if (!product) return fail('UNKNOWN_SKU', 'Không tìm thấy sản phẩm.');
        const current = lines.find((line) => line.sku === sku);
        const nextQuantity = (current?.quantity ?? 0) + quantity;
        if (!validQuantity(nextQuantity)) return invalidQuantity();
        const nextLines = current
          ? lines.map((line) => line.sku === sku
            ? { ...line, quantity: nextQuantity } : line)
          : [...lines, {
              sku, name: product.name,
              unitPrice: product.unitPrice, quantity,
            }];
        publish(nextLines);
        return { ok: true };
      });
    },
    setQuantity({ sku, quantity }) {
      return enqueue(() => {
        if (!validQuantity(quantity)) return invalidQuantity();
        const current = lines.find((line) => line.sku === sku);
        if (!current) return fail('NOT_FOUND', 'Sản phẩm không còn trong giỏ.');
        if (current.quantity !== quantity) {
          publish(lines.map((line) => line.sku === sku
            ? { ...line, quantity } : line));
        }
        return { ok: true };
      });
    },
    removeItem({ sku }) {
      return enqueue(() => {
        if (!lines.some((line) => line.sku === sku)) {
          return fail('NOT_FOUND', 'Sản phẩm không còn trong giỏ.');
        }
        publish(lines.filter((line) => line.sku !== sku));
        return { ok: true };
      });
    },
  });
}

import React, { useEffect, useRef, useState, useSyncExternalStore } from 'react';

const money = (value) => new Intl.NumberFormat('vi-VN', {
  style: 'currency', currency: 'VND',
}).format(value);

export default function CartPage({ controller }) {
  const snapshot = useSyncExternalStore(
    controller.subscribe, controller.getSnapshot,
  );
  const [pending, setPending] = useState(false);
  const [message, setMessage] = useState('');
  const busy = useRef(false);
  const mounted = useRef(false);

  useEffect(() => {
    mounted.current = true;
    return () => { mounted.current = false; };
  }, []);

  async function run(command) {
    if (busy.current) return;
    busy.current = true;
    setPending(true);
    setMessage('');
    try {
      const result = await command();
      if (mounted.current) {
        setMessage(result.ok ? 'Đã cập nhật giỏ.' : result.message);
      }
    } catch {
      if (mounted.current) setMessage('Thao tác chưa hoàn tất. Hãy thử lại.');
    } finally {
      busy.current = false;
      if (mounted.current) setPending(false);
    }
  }

  return (
    <section aria-labelledby="cart-title" aria-busy={pending}>
      <h2 id="cart-title">Giỏ hàng</h2>
      {snapshot.lines.length === 0 ? <p>Giỏ đang rỗng.</p> : (
        <ul>
          {snapshot.lines.map((line) => (
            <li key={line.sku}>
              <p>{line.name} — {money(line.unitPrice)} — Số lượng: {line.quantity}</p>
              <button
                type="button"
                aria-label={`Giảm số lượng ${line.name}`}
                disabled={pending || line.quantity === 1}
                onClick={() => run(() => controller.setQuantity({
                  sku: line.sku, quantity: line.quantity - 1,
                }))}
              >−</button>{' '}
              <button
                type="button"
                aria-label={`Tăng số lượng ${line.name}`}
                disabled={pending || line.quantity === 99}
                onClick={() => run(() => controller.setQuantity({
                  sku: line.sku, quantity: line.quantity + 1,
                }))}
              >+</button>{' '}
              <button
                type="button" disabled={pending}
                aria-label={`Xóa ${line.name} khỏi giỏ`}
                onClick={() => run(() => controller.removeItem({ sku: line.sku }))}
              >Xóa</button>
            </li>
          ))}
        </ul>
      )}
      <p>Tổng số lượng: {snapshot.summary.totalQuantity}</p>
      <p>Tổng tiền hàng: {money(snapshot.summary.subtotal)}</p>
      <p role="status">{pending ? 'Đang cập nhật giỏ…' : message}</p>
    </section>
  );
}

import('./bootstrap.jsx').catch((error) => {
  console.error(error);
  document.body.textContent = 'Cart standalone không khởi động được.';
});

import React from 'react';
import { createRoot } from 'react-dom/client';
import CartPage from './CartPage.jsx';
import { createCartController } from './createCartController.js';

async function start() {
  const controller = createCartController();
  // Seed chỉ dành cho trang standalone, không nằm trong factory.
  await controller.addItem({ sku: 'ao-thun-den', quantity: 1 });
  const container = document.createElement('div');
  document.body.append(container);
  createRoot(container).render(
    <React.StrictMode>
      <h1>Cart standalone</h1>
      <CartPage controller={controller} />
    </React.StrictMode>,
  );
}

start().catch((error) => {
  console.error(error);
  document.body.textContent = 'Không mở được cart standalone.';
});

import React, { useEffect, useRef, useState } from 'react';

const products = [
  { sku: 'ao-thun-den', name: 'Áo thun đen', price: 150000 },
  { sku: 'tui-vai', name: 'Túi vải', price: 80000 },
  { sku: 'binh-nuoc', name: 'Bình nước', price: 120000 },
];
const money = (value) => new Intl.NumberFormat('vi-VN', {
  style: 'currency', currency: 'VND',
}).format(value);
const unavailable = async () => ({
  ok: false, code: 'SERVICE_UNAVAILABLE', message: 'Chưa kết nối giỏ hàng.',
});

export default function CatalogPage({ onAddToCart = unavailable }) {
  const [pendingSku, setPendingSku] = useState(null);
  const [message, setMessage] = useState('');
  const busy = useRef(false);
  const mounted = useRef(false);

  useEffect(() => {
    mounted.current = true;
    return () => { mounted.current = false; };
  }, []);

  async function add(product) {
    if (busy.current) return;
    busy.current = true;
    setPendingSku(product.sku);
    setMessage('');
    try {
      const result = await onAddToCart({ sku: product.sku, quantity: 1 });
      if (mounted.current) {
        setMessage(result.ok ? `Đã thêm ${product.name} vào giỏ.` : result.message);
      }
    } catch {
      if (mounted.current) setMessage('Chưa thêm được sản phẩm. Hãy thử lại.');
    } finally {
      busy.current = false;
      if (mounted.current) setPendingSku(null);
    }
  }

  return (
    <section aria-labelledby="catalog-title" aria-busy={pendingSku !== null}>
      <h2 id="catalog-title">Catalog</h2>
      <ul>
        {products.map((product) => (
          <li key={product.sku}>
            <p>{product.name} — {money(product.price)}</p>
            <button
              type="button" disabled={pendingSku !== null}
              aria-label={`Thêm ${product.name} vào giỏ`}
              onClick={() => add(product)}
            >{pendingSku === product.sku ? 'Đang thêm…' : 'Thêm vào giỏ'}</button>
          </li>
        ))}
      </ul>
      <p role="status">{message}</p>
    </section>
  );
}

import React from 'react';
import { createRoot } from 'react-dom/client';
import CatalogPage from './CatalogPage';

const container = document.createElement('div');
document.body.append(container);
createRoot(container).render(
  <React.StrictMode>
    <h1>Catalog standalone</h1>
    <p>Trang này chỉ kiểm tra catalog UI, chưa kết nối cart.</p>
    <CatalogPage />
  </React.StrictMode>,
);

const path = require('node:path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const { dependencies } = require('./package.json');

module.exports = {
  context: __dirname,
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
    publicPath: 'auto',
    uniqueName: '_shop_cart',
    clean: true,
  },
  resolve: { extensions: ['.jsx', '.js', '.json'] },
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [['@babel/preset-react', { runtime: 'classic' }]],
        },
      },
    }],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'shop_cart',
      filename: 'remoteEntry.js',
      exposes: {
        './createCartController': './src/createCartController.js',
        './CartPage': './src/CartPage.jsx',
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: dependencies.react,
          strictVersion: true,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: dependencies['react-dom'],
          strictVersion: true,
        },
        'react-dom/client': {
          singleton: true,
          packageName: 'react-dom',
          requiredVersion: dependencies['react-dom'],
          strictVersion: true,
        },
      },
    }),
    new HtmlWebpackPlugin({ title: 'Shop cart standalone' }),
  ],
  devServer: { host: 'localhost', static: false },
};

remotes: {
  catalog: 'shop_catalog@http://localhost:3001/remoteEntry.js',
  cart: 'shop_cart@http://localhost:3002/remoteEntry.js',
},

devServer: {
  host: 'localhost',
  static: false,
  historyApiFallback: true,
},

let controllerPromise;

export function loadCartController() {
  if (!controllerPromise) {
    controllerPromise = import('cart/createCartController').then((module) => {
      if (module.apiVersion !== 1 || typeof module.createCartController !== 'function') {
        throw new Error('Cart controller contract không tương thích.');
      }
      const controller = module.createCartController();
      const methods = ['getSnapshot', 'subscribe', 'addItem', 'setQuantity', 'removeItem'];
      if (controller?.apiVersion !== 1 ||
          !methods.every((key) => typeof controller[key] === 'function')) {
        throw new Error('Cart controller thiếu public API.');
      }
      return controller;
    });
  }
  return controllerPromise;
}

import React, { Component, Suspense, lazy, useEffect, useState, useSyncExternalStore } from 'react';
import { loadCartController } from './cart-client';

const CatalogPage = lazy(() => import('catalog/CatalogPage'));
const CartPage = lazy(() => import('cart/CartPage'));

class RemoteBoundary extends Component {
  state = { failed: false };
  static getDerivedStateFromError() { return { failed: true }; }
  componentDidCatch(error, info) { console.error('Remote UI bị lỗi.', error, info); }
  render() {
    if (this.state.failed) {
      return (
        <section role="alert">
          <h2>Màn hình chưa khả dụng</h2>
          <p>Kiểm tra remote rồi tải lại trang. Giỏ trong memory sẽ được đặt lại.</p>
          <button type="button" onClick={() => window.location.reload()}>
            Tải lại trang
          </button>
        </section>
      );
    }
    return this.props.children;
  }
}

function CartBadge({ controller }) {
  const snapshot = useSyncExternalStore(
    controller.subscribe, controller.getSnapshot,
  );
  return <span aria-live="polite">{snapshot.summary.totalQuantity}</span>;
}

function usePathname() {
  const [pathname, setPathname] = useState(() => window.location.pathname);
  useEffect(() => {
    const onPopState = () => setPathname(window.location.pathname);
    window.addEventListener('popstate', onPopState);
    return () => window.removeEventListener('popstate', onPopState);
  }, []);

  function navigate(event, path) {
    if (event.defaultPrevented || event.button !== 0 ||
        event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
    event.preventDefault();
    if (window.location.pathname !== path) window.history.pushState(null, '', path);
    setPathname(path);
  }
  return [pathname, navigate];
}

export default function App() {
  const [pathname, navigate] = usePathname();
  const [controller, setController] = useState(null);
  const [cartError, setCartError] = useState(false);
  const view = pathname === '/cart' ? 'cart' :
    (pathname === '/' || pathname === '/catalog') ? 'catalog' : 'not-found';

  useEffect(() => {
    let active = true;
    loadCartController().then(
      (instance) => { if (active) setController(instance); },
      (error) => {
        console.error('Không khởi tạo được giỏ.', error);
        if (active) setCartError(true);
      },
    );
    return () => { active = false; };
  }, []);

  async function onAddToCart(command) {
    if (!controller) {
      return {
        ok: false, code: 'SERVICE_UNAVAILABLE',
        message: cartError ? 'Giỏ chưa khả dụng.' : 'Giỏ đang khởi động. Hãy thử lại.',
      };
    }
    return controller.addItem(command);
  }

  return (
    <>
      <header>
        <h1>Shop shell</h1>
        <nav aria-label="Điều hướng shop">
          <a href="/catalog" aria-current={view === 'catalog' ? 'page' : undefined}
             onClick={(event) => navigate(event, '/catalog')}>Catalog</a>{' | '}
          <a href="/cart" aria-current={view === 'cart' ? 'page' : undefined}
             onClick={(event) => navigate(event, '/cart')}>
            Giỏ hàng ({controller ? <CartBadge controller={controller} /> : '—'})
          </a>
        </nav>
      </header>
      {!controller && !cartError && <p role="status">Giỏ đang khởi động…</p>}
      {cartError && (
        <p role="alert">
          Không kết nối được giỏ. Catalog vẫn có thể xem; thêm hàng chưa khả dụng.{' '}
          <button type="button" onClick={() => window.location.reload()}>Tải lại trang</button>
        </p>
      )}
      <main>
        {view === 'not-found' ? <h2>Không tìm thấy trang</h2> : (
          <RemoteBoundary key={view}>
            <Suspense fallback={<p role="status">Đang tải màn hình…</p>}>
              {view === 'catalog'
                ? <CatalogPage onAddToCart={onAddToCart} />
                : controller
                  ? <CartPage controller={controller} />
                  : <p>Chưa mở được cart: controller chưa sẵn sàng.</p>}
            </Suspense>
          </RemoteBoundary>
        )}
      </main>
    </>
  );
}

npm run dev:catalog

npm run dev:cart

npm run dev:shell

import test from 'node:test';
import assert from 'node:assert/strict';
import { createCartController } from '../apps/cart/src/createCartController.js';

const add = (cart, sku, quantity = 1) => cart.addItem({ sku, quantity });

test('snapshot ổn định, gộp SKU và tính summary', async () => {
  const cart = createCartController();
  const initial = cart.getSnapshot();
  assert.strictEqual(cart.getSnapshot(), initial);
  assert.equal(Object.isFrozen(initial.lines), true);
  let notifications = 0;
  const unsubscribe = cart.subscribe(() => { notifications += 1; });

  assert.equal((await add(cart, 'ao-thun-den')).ok, true);
  assert.equal((await add(cart, 'ao-thun-den')).ok, true);
  assert.equal((await add(cart, 'tui-vai')).ok, true);
  const snapshot = cart.getSnapshot();
  assert.notStrictEqual(snapshot, initial);
  assert.strictEqual(cart.getSnapshot(), snapshot);
  assert.equal(snapshot.lines.length, 2);
  assert.equal(snapshot.lines[0].quantity, 2);
  assert.deepEqual(snapshot.summary, { totalQuantity: 3, subtotal: 380000 });
  assert.equal(notifications, 3);
  assert.equal(Object.isFrozen(snapshot.lines[0]), true);

  unsubscribe();
  await cart.removeItem({ sku: 'tui-vai' });
  assert.equal(notifications, 3);
  assert.equal(cart.getSnapshot().summary.subtotal, 300000);
});

test('command không hợp lệ không đổi state', async () => {
  const cart = createCartController();
  const before = cart.getSnapshot();
  for (const quantity of [0, -1, 1.5, 100]) {
    assert.equal((await add(cart, 'ao-thun-den', quantity)).code, 'INVALID_QUANTITY');
  }
  assert.equal((await add(cart, 'sku-khong-ton-tai')).code, 'UNKNOWN_SKU');
  assert.equal((await cart.removeItem({ sku: 'tui-vai' })).code, 'NOT_FOUND');
  assert.strictEqual(cart.getSnapshot(), before);

  await add(cart, 'ao-thun-den', 99);
  const full = cart.getSnapshot();
  assert.equal((await add(cart, 'ao-thun-den')).code, 'INVALID_QUANTITY');
  assert.strictEqual(cart.getSnapshot(), full);
});

test('hai command async không làm mất quantity', async () => {
  let release;
  const gate = new Promise((resolve) => { release = resolve; });
  const cart = createCartController({
    resolveProduct: async (sku) => {
      await gate;
      return { sku, name: 'Áo thun đen', unitPrice: 150000 };
    },
  });
  const first = add(cart, 'ao-thun-den');
  const second = add(cart, 'ao-thun-den');
  release();
  assert.deepEqual(await Promise.all([first, second]), [{ ok: true }, { ok: true }]);
  assert.equal(cart.getSnapshot().summary.totalQuantity, 2);
});

test('đổi quantity, xóa dòng và tạo instance độc lập', async () => {
  const cart = createCartController();
  await add(cart, 'ao-thun-den', 2);
  await cart.setQuantity({ sku: 'ao-thun-den', quantity: 3 });
  assert.equal(cart.getSnapshot().summary.subtotal, 450000);
  const unchanged = cart.getSnapshot();
  await cart.setQuantity({ sku: 'ao-thun-den', quantity: 3 });
  assert.strictEqual(cart.getSnapshot(), unchanged);
  await cart.removeItem({ sku: 'ao-thun-den' });
  assert.deepEqual(cart.getSnapshot().summary, { totalQuantity: 0, subtotal: 0 });
  assert.equal(createCartController().getSnapshot().lines.length, 0);
});

test('resolver lỗi không commit và queue vẫn dùng được', async () => {
  let failOnce = true;
  const cart = createCartController({
    resolveProduct: async (sku) => {
      if (failOnce) {
        failOnce = false;
        throw new Error('Lỗi resolver giả lập');
      }
      return { sku, name: 'Áo thun đen', unitPrice: 150000 };
    },
  });
  const before = cart.getSnapshot();
  assert.equal((await add(cart, 'ao-thun-den')).code, 'SERVICE_UNAVAILABLE');
  assert.strictEqual(cart.getSnapshot(), before);
  assert.equal((await add(cart, 'ao-thun-den')).ok, true);
  assert.equal(cart.getSnapshot().summary.totalQuantity, 1);
});

node --test tests/cart-controller.test.mjs
npm run build