Sunucu

@virastack/mask/server ile aynı şemayı Server Component ve Server Action içinde kullanın.

Sunucu girişi

Kök paket (@virastack/mask) hook içerdiği için "use client" ile gelir. Server Component, Server Action ve paylaşılan şema dosyalarında @virastack/mask/server kullanın: createMask, definePreset, doğrulayıcılar, toMinorUnits ve parseMasked buradadır.

// lib/checkout-masks.ts — "use client" yok
import type { MaskSchema } from "@virastack/mask/server"
 
export const checkoutMasks = {
  phone: { preset: "phone", country: "TR" },
  card: "card",
  cvv: { preset: "cvv", from: "card" },
  price: { preset: "currency", from: "currency" },
} as const satisfies MaskSchema

import { createMask } from "@virastack/mask/server"
 
const phone = createMask({ preset: "phone", country: "TR" })
 
export default async function Customers() {
  const customers = await getCustomers()
  return customers.map((c) => <p key={c.id}>{phone.format(c.phone)}</p>) // (555) 123 45 67
}

Server Action

parseMaskedFormData, URLSearchParams ya da düz nesne alır. Maskeli metni (form JavaScript'siz gönderildiyse) ya da ham değeri ayrıştırır, doğrular ve address.zip gibi adları iç içe nesneye çevirir.

"use server"
import { parseMasked } from "@virastack/mask/server"
import { checkoutMasks } from "@/lib/checkout-masks"
 
export async function checkout(formData: FormData) {
  const result = parseMasked(checkoutMasks, formData)
  if (!result.success) return { errors: result.errors } // { phone: "phone.incomplete" }
 
  // result.data: { phone: "5551234567", card: "4111…", price: "1234.56", currency: "TRY" }
}

Standard Schema

Üçüncü argüman olarak Zod, Valibot, ArkType gibi herhangi bir Standard Schema verin. Paket bunlara bağımlı değildir; yalnızca ortak arayüzü kullanır. Şema verildiğinde sonuç bir Promise'tir.

import { z } from "zod"
 
const schema = z.object({
  phone: z.string().length(10),
  price: z.string().transform(Number),
  currency: z.enum(["TRY", "USD"]),
})
 
const result = await parseMasked(checkoutMasks, formData, schema)
// önce maskeler ayrıştırılır ve doğrulanır, sonra şema çalışır
// result.data → z.output<typeof schema>

Sunucu girişi

// lib/checkout-masks.ts — "use client" yok
import type { MaskSchema } from "@virastack/mask/server"
 
export const checkoutMasks = {
  phone: { preset: "phone", country: "TR" },
  card: "card",
  cvv: { preset: "cvv", from: "card" },
  price: { preset: "currency", from: "currency" },
} as const satisfies MaskSchema

import { createMask } from "@virastack/mask/server"
 
const phone = createMask({ preset: "phone", country: "TR" })
 
export default async function Customers() {
  const customers = await getCustomers()
  return customers.map((c) => <p key={c.id}>{phone.format(c.phone)}</p>) // (555) 123 45 67
}

Server Action

"use server"
import { parseMasked } from "@virastack/mask/server"
import { checkoutMasks } from "@/lib/checkout-masks"
 
export async function checkout(formData: FormData) {
  const result = parseMasked(checkoutMasks, formData)
  if (!result.success) return { errors: result.errors } // { phone: "phone.incomplete" }
 
  // result.data: { phone: "5551234567", card: "4111…", price: "1234.56", currency: "TRY" }
}

Standard Schema

import { z } from "zod"
 
const schema = z.object({
  phone: z.string().length(10),
  price: z.string().transform(Number),
  currency: z.enum(["TRY", "USD"]),
})
 
const result = await parseMasked(checkoutMasks, formData, schema)
// önce maskeler ayrıştırılır ve doğrulanır, sonra şema çalışır
// result.data → z.output<typeof schema>