اسحب وصف zod لمكوّناتك في وقت الترجمة باستخدام برنامج نصي
تتيح لك هذه الميزة الحصول على وصف المكوّن الخاص بك في صورة وصف «Zod» آمن من ناحية الأنواع، والذي يوفّر تحققًا من المخططات يعتمد TypeScript أولًا واستدلالًا ساكنًا للأنواع لمحتواك.
لسحب مخطط 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] لم تُرجع الواجهة البرمجية أي مكوّنات. تحقّق من أنّ 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) لتحليل الكائنات بطريقة آمنة من ناحية الأنواع
يمكنك تحديث المكوّن الخاص بك من لوحة التحكم الإدارية وسحب المخطط المحدّث مرة أخرى لتسهيل التطوير