Puck - ตัวแก้ไข Drag & Drop โอเพนซอร์สสำหรับ React

• มีฟังก์ชัน Drag & Drop สำหรับการแก้ไขแบบภาพของไลบรารีคอมโพเนนต์ React ที่มีอยู่เดิม
• สามารถ self-host ได้ หรือเชื่อมต่อเข้ากับแอปพลิเคชันเดิมของตนเองได้
• รองรับการผสานรวมกับเฮดเลส CMS ของบุคคลที่สามเพื่อให้ผู้ใช้สามารถโหลดคอนเทนต์ได้โดยตรง (Strapi.js)
• รองรับการแก้ไขแบบอินไลน์
• ติดตั้งผ่าน npm หรือสร้างและติดตั้งแอปพลิเคชัน Puck โดยใช้ recipe
• ขยายความสามารถด้วยปลั๊กอิน: Plugin API ใช้แนวทางตาม React paradigm โดยปลั๊กอินแต่ละตัวที่ส่งให้ Puck เพียงต้องมีฟังก์ชัน 3 ตัวคือ renderRoot, renderRootFields, renderFields

[GN⁺]

ความคิดเห็นจาก Hacker News

• Puck เป็นวิชวลเอดิเตอร์โอเพนซอร์สสำหรับ React ที่ได้รับเสียงตอบรับเชิงบวกในด้านดีไซน์ที่เข้าใจง่ายและความยืดหยุ่น
• Puck ซึ่งใช้ไลเซนส์ MIT ทำหน้าที่เป็นเครื่องมือทรงพลังสำหรับนักพัฒนา
• มีความต้องการเครื่องมือที่คล้ายกันสำหรับ Vue ซึ่งตอกย้ำถึงความจำเป็นของเครื่องมือแบบนี้ในเฟรมเวิร์กที่หลากหลาย
• ปัจจุบัน Puck รองรับเลย์เอาต์แบบซ้อนในแนวตั้ง แต่มีข้อกังวลเกี่ยวกับความสามารถในการจัดการคอมโพเนนต์แบบ responsive ในเลย์เอาต์แบบคอลัมน์
• มีคำถามว่า Puck เรนเดอร์หน้าเพจบนไคลเอนต์หรือบนเซิร์ฟเวอร์ ซึ่งอาจจำกัดการนำ Puck ไปใช้งาน
• ผู้ใช้ชื่นชมความสามารถในการปรับแต่งเลย์เอาต์ของหน้าเพจด้วยรูปแบบข้อมูลอย่าง JSON หรือ XML
• มีข้อเสนอแนะให้ปรับปรุง เช่น เพิ่มสกรีนช็อตใน readme เพื่อให้เข้าใจคอมโพเนนต์แบบ drag-and-drop ได้ดีขึ้น
• ผู้ใช้รู้สึกว่าเริ่มต้นใช้งาน Puck และเพิ่มคอมโพเนนต์แบบกำหนดเองได้ง่าย
• มีคำถามว่า Puck รักษาการซิงก์ระหว่าง props ของคอมโพเนนต์ในโค้ดกับ props/ค่าของข้อมูลที่บันทึกไว้อย่างไร
• ผู้ใช้บางส่วนต้องการเครื่องมือแบบ Puck ที่มีเลเยอร์แบ็กเอนด์คล้าย Retool
• มีข้อเสนอเกี่ยวกับความสามารถแบบ WYSIWYG สำหรับการเรียก API และการแมปผลลัพธ์ตอบกลับเข้ากับคอมโพเนนต์
• ผู้ใช้บางส่วนเปรียบเทียบกับ Framer ที่กลายเป็นเว็บไซต์บิลเดอร์ และถามว่า Puck จะสร้างความแตกต่างอย่างไร
• มีข้อเสนอเล็กน้อยว่าเพื่อให้ค้นหาได้ง่ายในอนาคต ควรใส่ชื่อโปรเจกต์ "Puck" ไว้ในชื่อโพสต์ HN