سحب-مكوّن-Zod

تتيح لك هذه الميزة الحصول على وصف المخطط الخاص بك على هيئة وصف «Zod» آمن بالنسبة للأنواع، والذي يوفّر التحقق من المخططات الموجّه لـ TypeScript أولاً والاستدلال الثابت على الأنواع لمخططك.

https://zod.dev

لسحب مخطط Zod الخاص بنا، سنقوم بتحميل بعض التبعيات وإنشاء سكربت يستخدم بعض الأدوات المساعدة من cms-renderer.

لنبدأ ببنية مشروعنا

theme={null}
apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // هذا هو مكان وجود السكربت الخاص بنا

الآن سنحرر ملف generated-schema.ts

generated-schema.ts theme={null}
import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // استيراد الإعداد الخاص بي

async function main() {
  const { cmsUrl, websiteId } = cmsConfig;

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] لم يتم تعيين NEXT_PUBLIC_CMS_API_URL. قم بتعيينه في بيئتك أو في ملف .env.'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] لم يتم تعيين CMS_WEBSITE_ID. قم بتعيينه في بيئتك أو في ملف .env.'
    );
  }

  await saveZodSchemaCode(
    await fetchAllCustomSchemaFields(cmsConfig),
    './generated/cms-schemas.ts'
  );

  console.log('[generate-schemas] تم.');
}

main().catch((err) => {
  console.error('[generate-schemas] فشل:', err);
  process.exit(1);
});

يجب أن يبدو CmsConfig الخاص بك على النحو التالي

theme={null}
export const cmsConfig = {
  cmsUrl: process.env.NEXT_PUBLIC_CMS_API_URL,
  apiKey: process.env.CMS_API_KEY,
  websiteId: '...',
};

داخل ملف package.json نعرّف كيفية تشغيل السكربت وبعض التبعيات.

ملاحظة: إذا لم يكن لديك ملف tsconfig فبإمكانك إزالة العلم --tsconfig وقيمته

package.json theme={null}
{
  "name": "web",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    "generate-schemas": "tsx --tsconfig tsconfig.json scripts/generate-schemas.ts",
    "...": "..."
  },

الآن بعد أن نشغّل الأمر التالي

$ bun run generate-schemas
tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] تم.

ينبغي أن نحصل على مخرجات مشابهة ويمكننا رؤية ملف جديد في بنية المشروع لدينا

theme={null}
apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // هذا هو مكان وجود السكربت الخاص بنا
 generated/
   cms-schema.ts // مخطط Zod مُولَّد

يمكنك تفقد المحتوى بداخله لترى كيف يبدو مخططك. لتحديث هذا الملف عليك تشغيل أمر bun run generate-schemas مجددًا والذي يمكنك ربطه بتدفق عمل dev أو build الخاص بك.

يمكننا بعد ذلك سحب كائنات Zod هذه في ملف page.tsx لدينا بالشكل التالي

page.tsx theme={null}
import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';

// استدعِ petFoodPostSchema.parse(obj) لتحليل الكائنات بطريقة آمنة للأنواع

يمكنك تحديث مخططك من لوحة الإدارة وسحب المخطط المُحدَّث مجددًا لسهولة التطوير