CopyPatch
ENTR
GitHubBaşlayın

CopyPatch dokümantasyon merkezi

CopyPatch v3 Dokümantasyonu

Sunucu destekli React uygulamanıza aynı kökenden (same-origin) çalışan güvenli satır içi metin düzenleme yeteneği kazandırın.

01

Framework yolunuzu seçin

Next.js App RouterRota işleyicileri ve RSC snapshot'larıVite + NodeExpress, Fastify, Hono veya yerel NodeReact istemcisiProvider, editable bileşenler ve hook'larHost adaptörleriBackend, auth ve depolama sınırları

02

Gerçek istek ve veri akışı

Düzenleme, uygulamanızın aynı kökenindeki CopyPatch çalışma zamanı üzerinden ilerler.
  1. Tarayıcı ve React. Kullanıcı düzenleme kipini açar ve işaretli metni değiştirir.
  2. Uygulama rotası. Host adaptörü isteği /__copypatch/api/v2 yoluna iletir.
  3. CopyPatch backend. Kimlik doğrulama, yetkilendirme, doğrulama ve yayınlama burada uygulanır.
  4. SQLite veya PostgreSQL. Taslaklar, yayınlanmış anlık görüntüler ve denetim verisi kalıcı olur.

Temel İlke: CopyPatch harici bir SaaS veya bağımsız bir sunucu değil, uygulamanızın içine gömülen bir kütüphane çalışma zamanıdır. Uygulamanızla aynı kökende (same-origin) /__copypatch/api/v2 yolu altında çalışır; CORS yapılandırması, harici proxy katmanları veya ek sunucu maliyeti gerektirmez.

Nasıl Çalışır?

  1. Onaylanan Alanları İşaretleyin: Metin düğümlerini <EditableText contentKey=“…”> ile sarın veya öznitelik değerleri için useCopyPatch() kancasını kullanın.
  2. Backend’i Gömün: v2 backend’ini çerçevenizin (Next.js App Router, Astro SSR, React Router, Express, Fastify veya Hono) içine /__copypatch/api/v2 rotasıyla mount edin.
  3. Kalıcılık Katmanını Seçin: Tek sunuculu veya konteyner ortamları için @copypatch/storage-sqlite, yatayda ölçeklenen çoklu sunucular için @copypatch/storage-postgres kullanın.
  4. Canlı Sayfada Düzenleyin: Yetkili kullanıcılar ?copypatch=1 parametresiyle sayfayı açar, Argon2id parolası veya mevcut oturumla giriş yaparak doğrudan satır içinde düzenleme yapar.
  5. Taslak Kaydedin veya Yayınlayın: Değişiklikleri onay için taslak (draft) modunda saklayın veya publisher rolüyle tek tıkla canlıya alın.

Hızlı Entegrasyon Önizlemesi

HizliBaslangic.tsx
// 1. Sunucunuza route handler'ı ekleyin (Örn. Next.js, Express, Fastify, Hono)
// app/%5F%5Fcopypatch/api/v2/[...path]/route.ts
import { createCopyPatchRouteHandlers } from '@copypatch/next/server';
import { copypatch } from '@/lib/copypatch';

declare function resolveTrustedClientAddress(request: Request): Promise<string>;

export const { GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS } =
  createCopyPatchRouteHandlers(copypatch, {
    resolveContext: async (request) => ({
      clientAddress: await resolveTrustedClientAddress(request),
    }),
  });

// 2. İstemci bileşenlerinizi sağlayıcı ile sarın
import { CopyPatchProvider, EditableText } from '@copypatch/react';

export function Hero() {
  return (
    <CopyPatchProvider locale="tr">
      <EditableText contentKey="hero.title" as="h1">
        Metinleri müşterileriniz düzenlesin. Kodları ve tasarımı değil.
      </EditableText>
    </CopyPatchProvider>
  );
}

Çerçeve Uyumluluk Matrisi

Host ÇerçevesiSunucu EntegrasyonuDağıtım ve Çalışma Notları
Next.js App Router@copypatch/next catch-all rota işleyicileriSSR/RSC için readPublishedSnapshot() ile doğrudan sunucu içi anlık görüntü okuma.
Astro SSR@copypatch/node yerel adaptörüAstro SSR uç noktasına bağlanır; salt statik çıktı yalnızca yedek (fallback) metinleri gösterir.
React Router v7@copypatch/node yerel adaptörüFramework Mode sunucu giriş noktası ile tam entegrasyon.
Vite + Node / Express / Fastify / Hono@copypatch/node ara yazılım ve işleyicileriBody parser ve SPA catch-all kurallarından önce mount edilmelidir.
Salt Statik Dağıtım (SSG)Düzenleme İçin DesteklenmezPaketlenmiş metinleri render edebilir ancak API ve veritabanı olmadan düzenleme yapamaz.

v1 Sürümünden Temel Farklar

  • Gömülü Aynı Köken (Same-Origin) Çalışma Zamanı: v2, ayrı bir süreç veya port yerine mevcut Node/Next sunucunuzda /__copypatch/api/v2 altında çalışır. CORS veya harici proxy gerekmez.
  • Gelişmiş Depolama Adaptörleri: SQLite (better-sqlite3) ve PostgreSQL (pg) için sürüm takipli ve idempotent migrasyonlar.
  • Çift Kimlik Doğrulama Desteği: Dahili Argon2id parola oturumu (CSRF korumalı) veya mevcut kullanıcılarınızı kullanan authAdapter seçeneği.
  • Rol Ayrımı: Taslak güncellemesi için editor, canlıya alma için publisher rolleri.
  • İyimser Eşzamanlılık Denetimi (CAS): Çoklu editörlerin birbirlerinin değişikliklerini ezmesini önleyen revizyon doğrulaması.

Sonraki Adımlar

Kendi projenize en uygun kılavuzla kuruluma başlayın: