Tx

import { startTransaction } from "@firsttx/tx";
import { CartModel } from "./models/cart";

async function addToCart(item: { id: string; name: string; qty: number }) {
  // ViewTransition을 켜고 트랜잭션 시작 (timeout은 기본 30초)
  const tx = startTransaction({
    transition: true,
    // timeout: 30_000, // 필요하면 전역 타임아웃(ms)을 이렇게 조정할 수 있습니다.
  });

  // 1단계: 로컬 모델에 낙관적 추가 + 보상(compensate)
  await tx.run(
    () =>
      CartModel.patch((draft) => {
        draft.items.push(item);
      }),
    {
      compensate: () =>
        CartModel.patch((draft) => {
          draft.items.pop();
        }),
    },
  );

  // 2단계: 서버 요청 (AbortSignal을 인자로 받을 수 있습니다)
  await tx.run((signal) =>
    fetch("/api/cart", {
      method: "POST",
      body: JSON.stringify(item),
      signal, // 전체 트랜잭션 타임아웃에 맞춰 자동으로 abort됩니다.
    }),
  );

  // 모든 단계가 성공했다면 commit
  await tx.commit();
}

const tx = startTransaction();

await tx.run(
  async (signal) => {
    const res = await fetch("/api/order", {
      method: "POST",
      signal,
    });

    if (!res.ok) {
      throw new Error("Order failed");
    }
  },
  {
    // 실패 시 이 스텝만 재시도 (보상 로직은 최종 실패 이후에만 실행)
    retry: {
      maxAttempts: 3,
      delayMs: 300,
      backoff: "exponential", // 또는 "linear"
    },
    compensate: async () => {
      // 필요한 경우 롤백 API 호출 등
      await fetch("/api/order/cancel", { method: "POST" });
    },
  },
);

import { DEFAULT_RETRY_CONFIG, RETRY_PRESETS } from "@firsttx/tx";

tx.run(doSomething, {
  retry: RETRY_PRESETS.aggressive,
});

import { useTx } from "@firsttx/tx";
import { CartModel } from "./models/cart";

export function AddToCartButton({
  item,
}: {
  item: { id: string; name: string; qty: number };
}) {
  const { mutate, isPending, isError, error } = useTx({
    // 1) 낙관적 UI 업데이트
    optimistic: (input) => {
      CartModel.patch((draft) => {
        draft.items.push(input);
      });

      // 여기서 반환한 값은 snapshot으로 rollback / onSuccess 등에 전달됩니다.
      // 이 예제에서는 굳이 사용할 값이 없으므로 반환하지 않아도 됩니다(void snapshot).
    },

    // 2) 롤백 (변수와 snapshot을 모두 받을 수 있습니다)
    rollback: (input, _snapshot) => {
      CartModel.patch((draft) => {
        // 가장 단순한 예: 마지막으로 추가한 아이템 제거
        draft.items.pop();
      });
    },

    // 3) 실제 서버 요청 (snapshot 인자를 선택적으로 사용할 수 있습니다)
    request: (input, _snapshot) =>
      fetch("/api/cart", {
        method: "POST",
        body: JSON.stringify(input),
      }),

    // 선택: ViewTransition 사용 여부 (기본 false)
    transition: true,

    // 선택: 재시도 전략
    retry: {
      maxAttempts: 2,
      delayMs: 200,
      backoff: "exponential",
    },

    // 선택: 언마운트 시 자동으로 취소 (논리적 취소)
    cancelOnUnmount: true,

    onSuccess: () => {
      // 토스트 등 후처리
      console.log("Added to cart");
    },

    onError: (err) => {
      console.error("Failed to add item", err);
    },
  });

  return (
    <div className="flex items-center gap-2">
      <button
        type="button"
        disabled={isPending}
        onClick={() => mutate(item)}
        className="rounded-full bg-foreground px-4 py-2 text-xs font-medium text-background transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
      >
        {isPending ? "Adding..." : "Add to cart"}
      </button>
      {isError && (
        <p className="text-xs text-destructive">
          {error?.message ?? "Failed to add item"}
        </p>
      )}
    </div>
  );
}

import { TxError } from "@firsttx/tx";

try {
  await mutateAsync(input);
} catch (error) {
  if (error instanceof TxError) {
    toast(error.getUserMessage());

    logger.error(error.getDebugInfo(), {
      recoverable: error.isRecoverable(),
    });

    if (error.isRecoverable()) {
      // "다시 시도" 버튼 노출 등의 UX를 고려할 수 있습니다.
    }
  } else {
    // 일반 Error
    toast("알 수 없는 오류가 발생했습니다.");
  }
}

window.__FIRSTTX_DEVTOOLS__?.emit({
  id: crypto.randomUUID(),
  category: "tx",
  type: "step.success", // 예: 'start' | 'step.start' | 'step.success' | ...
  timestamp: Date.now(),
  priority: 1,
  data: { /* 트랜잭션/스텝 메타데이터 */ },
});