Zod Schema Studio

ภาพรวม

เวลาต้องการทดสอบ Zod schema ต้องสร้าง TypeScript project ชั่วคราวหรือใช้ TypeScript Playground ซึ่ง setup ยุ่งยาก โปรเจกต์นี้สร้าง web editor ที่ใช้งานได้ทันที — พิมพ์ schema และ test data แล้วเห็นผลทันที

สิ่งที่ทำแล้ว

• Editor ฝั่งซ้าย: เขียน Zod schema (ใช้ CodeMirror editor)
• Editor ฝั่งขวา: ใส่ test data เป็น JSON
• Output panel: แสดง parsed type definition (จาก z.infer<typeof schema>) และ validation errors แบบ formatted
• รัน Zod ใน browser ผ่าน ES modules โดยตรง ไม่มี backend
• Share schema ผ่าน URL hash — encode schema + test data ใน URL

กำลังทำ

• Syntax highlighting สำหรับ Zod chain methods
• ตัวอย่าง schema สำเร็จรูป (User, Product, FormInput) ให้เลือกได้
• Export schema เป็น TypeScript interface หรือ JSON Schema format
• Diff view: แสดงว่า schema เปลี่ยนอะไรระหว่าง version

ปัญหาที่เจอ

z.infer<typeof schema> ต้องการ TypeScript compiler ซึ่งรันใน browser ได้ผ่าน TypeScript compiler API แต่ไฟล์ใหญ่มาก (~7MB) แก้โดยใช้ zod-to-json-schema แทนเพื่อแสดง schema structure

เทคโนโลยี

• Astro (static, client-only)
• CodeMirror 6 สำหรับ code editor
• Zod รันใน browser (ESM import)
• zod-to-json-schema สำหรับ display output