FarsiUI برای استفاده در پروژه‌های Monorepo طراحی شده و CLI می‌تواند ساختار workspaceها، مسیر کامپوننت‌ها، وابستگی‌ها و importها را در نظر بگیرد.
برای ساخت یک پروژه Monorepo می‌توانید دستور init را با گزینه --monorepo اجرا کنید:
سپس قالب موردنظر را انتخاب کنید:
? Select a template
❯ Next.js
Viteساختار پروژه شامل workspace مربوط به اپلیکیشن و workspace مربوط به کامپوننت‌های مشترک خواهد بود.
برای مثال:
apps/
└── web/
packages/
└── ui/همه تنظیمات اولیه لازم برای شروع کار با FarsiUI در ساختار Monorepo انجام می‌شود.
برای اضافه کردن کامپوننت، ابتدا وارد مسیر اپلیکیشن موردنظر شوید:
cd apps/webسپس کامپوننت را اضافه کنید:
CLI ساختار Monorepo را بررسی می‌کند و فایل‌های موردنیاز را در مسیر مناسب قرار می‌دهد.
برای مثال، ممکن است کامپوننت button در packages/ui قرار بگیرد و import آن در apps/web به شکل مناسب تنظیم شود.
بعد از اضافه کردن کامپوننت‌ها، می‌توانید آن‌ها را از پکیج UI وارد کنید:
import { Button } from "@workspace/ui/components/button"همین ساختار برای hookها و utilityها هم قابل استفاده است:
import { useTheme } from "@workspace/ui/hooks/use-theme"
import { cn } from "@workspace/ui/lib/utils"یک ساختار معمول برای پروژه Monorepo می‌تواند به این شکل باشد:
apps/
└── web/
├── app/
│ └── page.tsx
├── components/
│ └── login-form.tsx
├── components.json
└── package.json
packages/
└── ui/
├── src/
│ ├── components/
│ │ └── button.tsx
│ ├── hooks/
│ ├── lib/
│ │ └── utils.ts
│ └── styles/
│ └── globals.css
├── components.json
└── package.json
package.json
turbo.jsonدر این ساختار:
apps/web اپلیکیشن اصلی است.packages/ui کامپوننت‌ها و کدهای قابل استفاده مجدد را نگه می‌دارد.components.json دارد.components.jsonهر workspace باید components.json متناسب با ساختار خودش داشته باشد.
برای اپلیکیشن:
{
"$schema": "https://farsiui.ir/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "../../packages/ui/src/styles/globals.css",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"hooks": "@/hooks",
"lib": "@/lib",
"utils": "@workspace/ui/lib/utils",
"ui": "@workspace/ui/components"
}
}و برای پکیج UI:
{
"$schema": "https://farsiui.ir/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/styles/globals.css",
"cssVariables": true
},
"aliases": {
"components": "@workspace/ui/components",
"utils": "@workspace/ui/lib/utils",
"hooks": "@workspace/ui/hooks",
"lib": "@workspace/ui/lib",
"ui": "@workspace/ui/components"
}
}برای اینکه CLI بتواند فایل‌ها را در مسیر درست قرار دهد:
components.json خودش را داشته باشد.style، tsx و سایر گزینه‌ها باید بین workspaceها با ساختار پروژه هماهنگ باشند.tailwind.config باید خالی باشد.با تنظیم درست این موارد، CLI می‌تواند کامپوننت‌ها و وابستگی‌های آن‌ها را در workspace مناسب قرار دهد و importهای لازم را مدیریت کند.
package.json#importsدر یک Monorepo می‌توانید برای مسیرهای داخلی هر workspace از package.json#imports استفاده کنید.
برای مثال:
{
"name": "web",
"private": true,
"type": "module",
"imports": {
"#components/*": "./src/components/*.tsx",
"#lib/*": "./src/lib/*.ts",
"#hooks/*": "./src/hooks/*.ts"
},
"dependencies": {
"@workspace/ui": "workspace:*"
}
}در این حالت می‌توانید aliasهای محلی را در components.json تعریف کنید:
{
"aliases": {
"components": "#components",
"ui": "@workspace/ui/components",
"lib": "#lib",
"hooks": "#hooks",
"utils": "@workspace/ui/lib/utils"
}
}برای importهای بین workspaceها، پکیج مقصد باید مسیرهای موردنیاز را در exports در اختیار workspaceهای دیگر قرار دهد.
برای مثال:
{
"name": "@workspace/ui",
"private": true,
"type": "module",
"imports": {
"#components/*": "./src/components/*.tsx",
"#lib/*": "./src/lib/*.ts",
"#hooks/*": "./src/hooks/*.ts"
},
"exports": {
"./globals.css": "./src/styles/globals.css",
"./components/*": "./src/components/*.tsx",
"./lib/*": "./src/lib/*.ts",
"./hooks/*": "./src/hooks/*.ts"
}
}و تنظیمات components.json می‌تواند از aliasهای محلی استفاده کند:
{
"aliases": {
"components": "#components",
"ui": "#components",
"lib": "#lib",
"hooks": "#hooks",
"utils": "#lib/utils"
}
}در این ساختار:
@workspace/ui/... در دسترس هستند.packages/ui می‌توانند از aliasهای محلی #... استفاده کنند.exports پکیج مقصد در دسترس باشد.برای جزئیات بیشتر درباره package.json#imports، راهنمای Package Imports را ببینید.