Astro Component Playground

ภาพรวม

การทดสอบ Astro component ต้องสร้างไฟล์, รัน dev server, แล้วดูผล — วนซ้ำทุกครั้ง โปรเจกต์นี้สร้าง web-based sandbox ที่ทำได้ทันทีในหน้าเดียว

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

• Editor panel: CodeMirror 6 สำหรับเขียน Astro component syntax (.astro)
• Preview panel: iframe ที่ reload อัตโนมัติเมื่อ code เปลี่ยน
• ส่ง component code ไปยัง endpoint ที่รัน Astro compiler บน server
• รองรับ import CSS custom properties และ basic JavaScript
• ตัวอย่าง components สำเร็จรูป: Card, Button, NavLink, Badge

กำลังทำ

• รองรับ Astro Props และ TypeScript interface ใน --- frontmatter
• แสดง compiled HTML output (ผล render) คู่กับ preview
• Share component ผ่าน URL (encode ใน hash)
• Dark mode สำหรับ editor

ความท้าทาย

Astro compiler รันฝั่ง server เท่านั้น ไม่มี browser version ทำให้ต้องมี backend endpoint รับ component string แล้ว compile + render ส่งกลับ — เป็น reason หลักที่ต้องใช้ Astro SSR mode แทนที่จะเป็น static site

เทคโนโลยี

• Astro 5 (SSR mode, Node.js adapter)
• CodeMirror 6 + @codemirror/lang-html
• @astrojs/compiler สำหรับ server-side compilation
• TypeScript strict