คำสั่ง CLI

รูปแบบคำสั่ง flags, aliases และการเลือกคอมโพเนนต์ของ react-thaizip

เรียก CLI ผ่าน npx react-thaizip ภายในโฟลเดอร์รากของโปรเจกต์ React หรือ Next.js ที่ต้องการ scaffold

รูปแบบคำสั่ง

react-thaizip init [--yes]
react-thaizip add [component...] [--yes] [--overwrite]
react-thaizip --help
react-thaizip --version
react-thaizip init --help
react-thaizip add --help

เมื่อใช้งานจริง ให้เติม npx ข้างหน้า เช่น npx react-thaizip add autocomplete

`init`

npx react-thaizip init

init ทำงานตามลำดับนี้:

ตรวจหา package manager, โครงสร้างโปรเจกต์ และ Tailwind CSS v3 หรือ v4 (ต้องติดตั้งไว้ก่อนแล้ว) แล้วพิมพ์สรุปผลตรวจก่อนถามคำถามใด ๆ
ให้ยืนยันหรือแก้ componentDir ถ้าไม่ได้ส่ง --yes
เพิ่ม design tokens ลง global CSS ถ้าเจอไฟล์
เสนอให้ติดตั้ง thaizip ถ้ายังไม่มี
สร้าง thaizip.config.json
ถ้ามีขั้นตอนที่ต้องทำเอง (พิมพ์ theme.extend snippet สำหรับ Tailwind v3 หรือ design-token block เมื่อไม่พบ global CSS) จะรวมพิมพ์ทั้งหมดไว้ท้ายสุดใต้หัวข้อ === Manual steps required ===
พิมพ์คำแนะนำขั้นต่อไป: Next: run \npx react-thaizip add autocomplete` to add your first component.`

ตัวอย่างผลลัพธ์ตอนเริ่มรัน:

Detected project settings:
  Components directory: app/components
  Package manager: npm
  Tailwind: v4 (app/globals.css)

Tailwind จะถูกตรวจก่อนถามเรื่อง componentDir เสมอ ดังนั้นโปรเจกต์ที่ยังไม่ได้ติดตั้ง Tailwind จะหยุดทำงานทันทีโดยไม่ถามคำถามใด ๆ ก่อน

ดูรูปแบบไฟล์และกฎการตรวจหาได้ที่ ข้อมูลอ้างอิงการตั้งค่า

`add`

เพิ่มคอมโพเนนต์หนึ่งตัว:

npx react-thaizip add autocomplete

เพิ่มหลายตัวพร้อมกันได้โดยคั่นชื่อด้วยช่องว่าง:

npx react-thaizip add autocomplete cascade-select

ถ้าไม่ระบุชื่อ add จะแสดง interactive multiselect ที่มีคอมโพเนนต์สาธารณะทั้งห้าตัว:

npx react-thaizip add

ชื่อและ aliases ที่ใช้ได้

การจับคู่ชื่อไม่แยกตัวพิมพ์เล็ก-ใหญ่

คอมโพเนนต์	ชื่อและ aliases
`ThaiAddressAutocomplete`	`autocomplete`, `thai-address-autocomplete`, `ThaiAddressAutocomplete`
`ThaiAddressCascadeSelect`	`cascade`, `cascade-select`, `thai-address-cascade-select`, `ThaiAddressCascadeSelect`
`ThaiAddressForm`	`address-form`, `thai-address-form`, `ThaiAddressForm`
`ThaiAddressDisplay`	`address-display`, `thai-address-display`, `ThaiAddressDisplay`
`ThaiAddressFormField`	`address-form-field`, `thai-address-form-field`, `ThaiAddressFormField`

แต่ละคอมโพเนนต์ดึง utils และ hook สำหรับโหลดดัชนีมาเป็น registry dependencies โดยอัตโนมัติ รายการภายในเหล่านี้ไม่แสดงใน multiselect หรือ --help และไม่ต้องระบุชื่อเอง

ก่อนเขียนไฟล์ add จะตรวจว่า thaizip ที่มีอยู่เป็นเวอร์ชัน 0.7.0 ขึ้นไป ติดตั้ง dependencies ที่ขาดเมื่อได้รับการยืนยัน แล้วเขียนไฟล์ตามตำแหน่งใน thaizip.config.json

Flags

Flag	ผลลัพธ์
`--yes`, `-y`	ไม่แสดง confirmation prompts และใช้คำตอบเริ่มต้นของแต่ละ prompt
`--overwrite`	เขียนทับไฟล์คอมโพเนนต์ที่มีอยู่โดยไม่ถาม และเปิดให้เขียนทับไฟล์ `lib`/hook ที่ปกติได้รับการป้องกันไว้ ใช้กับ `add` เท่านั้น
`--help`, `-h`	แสดง help; วางหลัง `init` หรือ `add` เพื่อดู help เฉพาะคำสั่ง
`--version`, `-v`	แสดงเวอร์ชันของ CLI

Flags ที่รู้จักวางตำแหน่งใดก็ได้ในอาร์กิวเมนต์ ถ้าส่งทั้ง help และ version help จะทำงานก่อนเสมอ และจะไม่เรียก init หรือ add

--yes ไม่ได้แปลว่าเขียนทับทุกอย่าง: คำตอบเริ่มต้นของ prompt เขียนทับไฟล์คอมโพเนนต์และไฟล์ config คือ “ไม่” ดังนั้นไฟล์ที่มีอยู่ยังถูกข้าม ใช้ --overwrite แยกต่างหากเมื่อตั้งใจแทนที่คอมโพเนนต์ ไฟล์ hook และ lib ที่มีอยู่ยังได้รับการป้องกันตามค่าเริ่มต้นเสมอ แม้ส่ง --yes เพราะผู้ใช้มักแก้ไฟล์เหล่านี้เอง ต้องส่ง --overwrite อย่างชัดเจนเท่านั้นจึงจะเขียนทับได้

ถ้าใช้ flag ที่ไม่รู้จัก CLI จะจบด้วย error ก่อนเรียกคำสั่ง ดูวิธีแก้ปัญหาการติดตั้งและไฟล์ที่มีอยู่ได้ที่ การแก้ปัญหา