การตั้งค่า

รูปแบบ thaizip.config.json v4, สไตล์คอมโพเนนต์ และกฎการตรวจหาโปรเจกต์

npx react-thaizip init สร้าง thaizip.config.json ที่รากโปรเจกต์ คำสั่ง add อ่านไฟล์นี้เพื่อหาตำแหน่งเขียนคอมโพเนนต์และไฟล์ช่วยเหลือ

รูปแบบ v4

ตัวอย่างนี้แสดงทุกฟิลด์ของ config v4 สำหรับโปรเจกต์ที่ไม่มี shadcn/ui แบบที่รองรับ path และเวอร์ชัน CLI ที่บันทึกจริงขึ้นอยู่กับโปรเจกต์

{
  "typescript": true,
  "componentDir": "app/components",
  "libDir": "lib",
  "hooksDir": "hooks",
  "packageManager": "npm",
  "tailwind": {
    "version": 4,
    "css": "app/globals.css"
  },
  "style": "vanilla",
  "shadcnBase": "",
  "shadcnUiAlias": "",
  "shadcnUiDir": "",
  "registryVersion": "0.3.7"
}

ฟิลด์	ค่าที่ใช้ได้	ความหมาย
`typescript`	`true` หรือ `false`	ตรวจพบอัตโนมัติตอน `init` จากการมีไฟล์ `tsconfig.json` (ไม่มีการถามผู้ใช้) กำหนดว่า `add` จะเขียนไฟล์เป็น `.tsx`/`.ts` ตามต้นฉบับ (`true`) หรือตัด syntax ของ TypeScript ออกแล้วเขียนเป็น `.jsx`/`.js` แทน (`false`)
`componentDir`	string ที่ไม่ว่าง	ตำแหน่งเขียนไฟล์คอมโพเนนต์ เทียบจากรากโปรเจกต์
`libDir`	string ที่ไม่ว่าง	ตำแหน่งเขียน `utils.ts`; ค่าเริ่มต้นจาก `init` คือ `lib`
`hooksDir`	string ที่ไม่ว่าง	ตำแหน่งเขียน shared hooks; ค่าเริ่มต้นคือ `hooks`
`packageManager`	`npm`, `yarn`, `pnpm`, `bun`	package manager ที่ `add` ใช้ติดตั้ง dependencies
`tailwind.version`	`3` หรือ `4`	major version ของ Tailwind ที่ตรวจพบ
`tailwind.css`	string	path ของ global CSS เทียบจากรากโปรเจกต์ หรือ `""` เมื่อหาไฟล์ไม่พบ
`style`	`vanilla` หรือ `shadcn`	เลือก template แบบ Tailwind/Base UI หรือแบบที่ประกอบจาก shadcn/ui primitives ของโปรเจกต์; `init` ตรวจหาอัตโนมัติ
`shadcnBase`	`""`, `base`, `radix` หรือ `aria`	เป็น `""` เมื่อใช้ `vanilla`; กรณี shadcn ระบุไลบรารีของ UI primitives
`shadcnUiAlias`	string	import prefix จาก `components.json` `aliases.ui`; เป็น `""` เมื่อใช้ `vanilla`
`shadcnUiDir`	string	directory เทียบจากรากโปรเจกต์ที่ resolve จาก alias; เป็น `""` เมื่อใช้ `vanilla`
`registryVersion`	string ที่ไม่ว่าง	เวอร์ชัน CLI ที่บันทึกตอนเขียนไฟล์ครั้งล่าสุด; เป็น metadata ของ registry ไม่ใช่เวอร์ชัน `thaizip`

Path ทุกค่าถูกตีความจาก working directory ที่เรียก CLI จึงควรรัน init และ add ที่รากโปรเจกต์เดียวกับไฟล์ config

registryVersion ไม่ใช่แค่ metadata เฉย ๆ: add ใช้ค่านี้ตรวจความเก่าของไฟล์ lib/hook ที่ถูกป้องกันไว้ ถ้า add ข้ามไฟล์เหล่านั้นเพราะมีอยู่แล้ว (protected) และ registryVersion ที่บันทึกไว้เก่ากว่าเวอร์ชันของ CLI ที่กำลังรัน จะพิมพ์คำเตือนว่าไฟล์นั้นอาจล้าสมัย พร้อมคำสั่งสำหรับ refresh เช่น npx react-thaizip add utils --overwrite ทุกครั้งที่ add เขียนไฟล์จริงอย่างน้อยหนึ่งไฟล์ (ไม่ว่าจะเป็น component, lib หรือ hook) registryVersion ใน thaizip.config.json จะถูกอัปเดตเป็นเวอร์ชันของ CLI ที่รันอยู่โดยอัตโนมัติ

การตรวจหาสไตล์คอมโพเนนต์

init อ่าน components.json ถ้ามี ค่า style ที่ขึ้นต้นด้วย base-, radix- หรือ aria- จะเลือก template shadcn/ui ของไลบรารีนั้น ส่วนค่าเก่า default และ new-york จะเลือก Radix ถ้าไม่มีหรือไม่รู้จัก style จะเลือก vanilla สำหรับ shadcn/ui ที่รองรับ add จะติดตั้ง UI primitives ที่ยังขาดผ่าน shadcn CLI ส่วนคอมโพเนนต์ interactive แบบ vanilla ใช้ Base UI โดยตรง ThaiAddressDisplay ไม่ต้องใช้ UI primitives

ค่า style และ shadcnBase ถูกบันทึกใน config หากต้องการเปลี่ยนหลัง init ให้แก้ฟิลด์ที่เกี่ยวข้องให้สอดคล้องกัน แล้วตรวจไฟล์ก่อนรัน add --overwrite เพราะคำสั่งจะเขียนทับซอร์สเดิม

การตรวจหาโครงสร้างโปรเจกต์

init เลือก componentDir เริ่มต้นตามลำดับนี้ โดยตรวจจากรากโปรเจกต์:

เงื่อนไข	Component directory
มี `app/`	`app/components/`
ไม่มี `app/` แต่มี `pages/`	`components/`
ไม่มีทั้งสองอย่าง	`src/components/`

ถ้ามีทั้ง app/ และ pages/ จะเลือก app/components/ เมื่อไม่ใช้ --yes คุณแก้ตำแหน่งที่ prompt ได้ก่อนเขียน config

การตรวจหา package manager

CLI ใช้ lockfile แรกที่พบตามลำดับนี้:

bun.lock หรือ bun.lockb → bun
pnpm-lock.yaml → pnpm
yarn.lock → yarn
package-lock.json → npm
ถ้าไม่มี lockfile เหล่านี้ → npm

การตรวจหา Tailwind

Tailwind เป็นสิ่งที่ต้องติดตั้งก่อน init CLI ไม่ได้ติดตั้ง Tailwind ให้ กฎการตรวจหาทำงานตามลำดับ:

หา @import "tailwindcss" หรือรูปแบบ single quote ใน global CSS ที่รู้จัก ถ้าพบให้เป็น Tailwind v4 พร้อม path ของไฟล์นั้น
ถ้า dependency tailwindcss ระบุ major version 4 ขึ้นไป ให้เป็น v4 และเก็บ tailwind.css เป็น "" เมื่อยังหา stylesheet ไม่พบ
หา tailwind.config.ts, .js, .cjs หรือ .mjs ถ้าพบให้เป็น v3 และหา global CSS ที่มี @tailwind
ถ้า dependency ระบุ major version 3 ให้เป็น v3 และเก็บ CSS path เป็น "" เมื่อหาไม่พบ
ถ้าไม่มีเงื่อนไขใดตรง init จะหยุดและแนะนำให้ติดตั้ง Tailwind

Global CSS ที่ค้นหาตามลำดับคือ app/globals.css, src/app/globals.css, styles/globals.css, src/styles/globals.css, src/index.css, src/App.css และ app/global.css

การเขียนไฟล์และ import paths

Template คอมโพเนนต์ถูกเขียนต้นฉบับด้วย imports @/lib/* และ @/hooks/* เพื่อ typecheck ใน registry แต่ทุกครั้งที่ add คัดลอกไฟล์คอมโพเนนต์ รวมถึงการเขียนทับ จะเขียน specifiers เหล่านั้นเป็น relative paths จาก componentDir ไปยัง libDir และ hooksDir ที่กำหนดใน config โดยไม่ใส่นามสกุลไฟล์

ตัวอย่าง เมื่อ componentDir เป็น app/components, libDir เป็น lib และ hooksDir เป็น hooks imports จะชี้ออกจาก app/components ไปยัง directory สองแห่งนั้น ไม่จำเป็นต้องตั้ง alias @ ในโปรเจกต์ปลายทาง

ไฟล์ lib และ hook ที่มีอยู่ได้รับการป้องกันตามค่าเริ่มต้นเสมอ แม้ส่ง --yes และจะถูกเขียนทับเฉพาะเมื่อส่ง --overwrite อย่างชัดเจนเท่านั้น ส่วนไฟล์คอมโพเนนต์ที่มีอยู่จะถูกข้ามตามค่าเริ่มต้นและจะเขียนทับเฉพาะเมื่อยืนยันหรือส่ง --overwrite การ rewrite imports จึงเกิดเฉพาะเมื่อคัดลอกคอมโพเนนต์จริง

Config รุ่นเก่า

เมื่อ add อ่าน config v1, v2 หรือ v3 ที่รองรับได้ จะย้ายเป็น v4 ในตำแหน่งเดิม การย้ายจาก v1 เติม libDir, hooksDir และ Tailwind metadata (ใช้ Tailwind v4 กับ CSS path ว่างหากตรวจไม่พบ) และเก็บ typescript: false ไว้ถ้ามี v1/v2 จะได้ style: "vanilla"; v3 ที่เป็น shadcn จะได้ shadcnBase: "base" เพราะ v3 รองรับเฉพาะ shadcn ที่ใช้ Base UI การย้ายไฟล์ไม่ตรวจหาสไตล์ shadcn ปัจจุบันใหม่ หาก config ที่ได้ไม่ถูกต้อง ให้รัน npx react-thaizip init เพื่อสร้างใหม่

หาก path หรือ metadata ไม่ตรงกับโปรเจกต์ ดูขั้นตอนกู้คืนที่ การแก้ปัญหา

การตั้งค่า

รูปแบบ v4Copy Anchor Link

การตรวจหาสไตล์คอมโพเนนต์Copy Anchor Link

การตรวจหาโครงสร้างโปรเจกต์Copy Anchor Link

การตรวจหา package managerCopy Anchor Link

การตรวจหา TailwindCopy Anchor Link

การเขียนไฟล์และ import pathsCopy Anchor Link

Config รุ่นเก่าCopy Anchor Link