빠른 시작

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { firstTx } from "@firsttx/prepaint/plugin/vite";

export default defineConfig({
  plugins: [
    react(),
    firstTx(),
  ],
});

// main.tsx
import React from "react";
import { createFirstTxRoot } from "@firsttx/prepaint";
import { App } from "./App";

createFirstTxRoot(
  document.getElementById("root")!,
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

// models/cart.ts
import { defineModel } from "@firsttx/local-first";
import { z } from "zod";

export const CartModel = defineModel("cart", {
  schema: z.object({
    items: z.array(
      z.object({
        id: z.string(),
        name: z.string(),
        qty: z.number(),
      }),
    ),
  }),
  // ttl은 선택사항입니다. 기본값은 5분(5 * 60 * 1000 ms)입니다.
  ttl: 5 * 60 * 1000,
  // 초기값을 지정하면 첫 방문 시에도 null 대신 이 값으로 시작합니다.
  initialData: {
    items: [],
  },
});

// CartPage.tsx
import { useSyncedModel } from "@firsttx/local-first";
import { CartModel } from "./models/cart";

async function fetchCart(current: unknown) {
  const res = await fetch("/api/cart");
  if (!res.ok) throw new Error("Failed to fetch cart");
  return res.json();
}

export function CartPage() {
  const {
    data: cart,
    isSyncing,
    error,
  } = useSyncedModel(CartModel, fetchCart, {
    // 기본값은 "always" 입니다.
    // "stale"로 설정하면 TTL이 지난 경우에만 자동 동기화를 수행합니다.
    syncOnMount: "stale",
  });

  if (!cart) {
    return <div>Loading cart...</div>;
  }

  return (
    <div className="space-y-4">
      {cart.items.map((item) => (
        <div key={item.id} className="flex items-center justify-between">
          <span>{item.name}</span>
          <span className="text-sm text-muted-foreground">x {item.qty}</span>
        </div>
      ))}

      {isSyncing && (
        <p className="text-xs text-muted-foreground">
          Syncing latest data…
        </p>
      )}

      {error && (
        <p className="text-xs text-destructive">
          Failed to sync: {error.getUserMessage?.() ?? error.message}
        </p>
      )}
    </div>
  );
}

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

type CartItem = {
  id: string;
  name: string;
  qty: number;
};

export async function addToCart(item: CartItem) {
  const tx = startTransaction({ transition: true });

  // 1단계: 로컬 모델 낙관적 업데이트
  await tx.run(
    () =>
      CartModel.patch((draft) => {
        draft.items.push(item);
      }),
    {
      // 실패 시 보상(rollback)
      compensate: () =>
        CartModel.patch((draft) => {
          draft.items.pop();
        }),
    },
  );

  // 2단계: 서버에 실제 반영
  await tx.run(() =>
    fetch("/api/cart", {
      method: "POST",
      body: JSON.stringify(item),
    }),
  );

  // 모든 단계가 성공하면 커밋
  await tx.commit();
}