משוך תיאור Zod של הרכיבים שלך בזמן קומפילציה באמצעות סקריפט
תכונה זו מאפשרת לך לקבל את תיאור הרכיב שלך בצורת תיאור "Zod" בטוח טיפוסים, המספק ולידציה של סכימה עם עדיפות ל-TS והיסק טיפוסים סטטי עבור התוכן שלך.
כדי למשוך את סכימת ה-Zod שלנו, נטען כמה תלויות וניצור סקריפט שמשתמש בכמה כלי עזר מתוך cms-renderer שלנו.
בואו נתחיל עם מבנה הפרויקט שלנו
apps/
web/
app/
page.tsx
scripts/
generate-schemas.ts // כאן הסקריפט שלנו חי
עכשיו נערוך את הקובץ generated-schema.ts הזה
import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // מייבא את קובץ התצורה שלי
async function main() {
const { cmsUrl, websiteId, apiKey } = cmsConfig;
if (!cmsUrl) {
throw new Error(
'[generate-schemas] NEXT_PUBLIC_CMS_API_URL לא הוגדר. הגדר אותו בסביבת העבודה שלך או בקובץ .env.'
);
}
if (!websiteId) {
throw new Error(
'[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID לא הוגדר. הגדר אותו בסביבת העבודה שלך או בקובץ .env.'
);
}
if (!apiKey) {
throw new Error(
'[generate-schemas] PROFOUND_API_KEY לא הוגדר. הגדר אותו בסביבת העבודה שלך או בקובץ .env.'
);
}
const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });
if (schemas.length === 0) {
throw new Error(
'[generate-schemas] לא הוחזרו רכיבים מה-API. בדוק ש-PROFOUND_API_KEY תקף ומצביע על האתר הנכון.'
);
}
await saveZodSchemaCode(schemas, './generated/cms-schemas.ts');
console.log('[generate-schemas] הושלם.');
}
main().catch((err) => {
console.error('[generate-schemas] נכשל:', err);
process.exit(1);
});
ה-CmsConfig שלך צריך להיראות כך
export const cmsConfig = {
cmsUrl: process.env.NEXT_PUBLIC_CMS_API_URL,
apiKey: process.env.CMS_API_KEY,
websiteId: '...',
};
בתוך קובץ ה-package.json שלנו, נגדיר כיצד להריץ את הסקריפט וכמה תלויות
הערה: אם אין לך tsconfig, אפשר להסיר את הדגל
--tsconfigואת הערך שלו
{
"name": "web",
"version": "0.1.0",
"type": "module",
"private": true,
"scripts": {
"generate-schemas": "tsx --tsconfig tsconfig.json scripts/generate-schemas.ts",
"...": "..."
},
"dependencies": {
"cms-renderer": "0.3.1",
"zod": "^4.3.6",
"...": "..."
},
"devDependencies": {
"tsx": "^4.21.0",
"object-hash": "^3.0.0",
"...": "..."
}
}
עכשיו, אחרי שנריץ
$ bun run generate-schemas
tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] הושלם.
נקבל פלט דומה, ונראה קובץ חדש במבנה הפרויקט שלנו
apps/
web/
app/
page.tsx
scripts/
generated-schema.ts // כאן הסקריפט שלנו חי
generated/
cms-schema.ts // סכימת zod שנוצרה
אפשר להסתכל בפנים ולראות איך נראית הסכימה שלך. כדי לעדכן את הקובץ הזה, צריך להריץ שוב את הפקודה bun run generate-schemas, שאפשר לחבר אל תהליך ה-dev או ה-build שלך.
לאחר מכן אפשר למשוך את אובייקטי ה-zod האלה לקובץ page.tsx שלנו כך
import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';
// הפעל petFoodPostSchema.parse(obj) עבור ניתוח אובייקטים בטוח טיפוסים
אפשר לעדכן את הרכיב שלך מלוח הניהול ולמשוך שוב את הסכימה המעודכנת לפיתוח נוח.