Component Zod Pull

Bir betik kullanarak derleme zamanında bileşenlerinizin zod tanımını çekin

Bu özellik, bileşeninizin açıklamasını, içeriğiniz için TS öncelikli şema doğrulaması ve statik tür çıkarımı sağlayan tür güvenli bir "Zod" tanımı biçiminde almanıza olanak tanır.

https://zod.dev

Zod şemamızı almak için bazı bağımlılıkları yükleyecek ve cms-renderer içindeki bazı yardımcıları kullanan bir betik oluşturacağız.

Proje yapımızla başlayalım

apps/
 web/
 app/
   page.tsx
 scripts/
   generate-schemas.ts // betiğimizin bulunduğu yer

Şimdi bu generated-schema.ts dosyasını düzenleyeceğiz

import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // yapılandırmamı içe aktarıyorum

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

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL ayarlanmadı. Ortamınızda veya .env dosyanızda ayarlayın.'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID ayarlanmadı. Ortamınızda veya .env dosyanızda ayarlayın.'
    );
  }
  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY ayarlanmadı. Ortamınızda veya .env dosyanızda ayarlayın.'
    );
  }

  const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] API\'den hiçbir bileşen dönmedi. PROFOUND_API_KEY\'in geçerli olduğundan ve doğru web sitesini işaret ettiğinden emin olun.'
    );
  }

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

  console.log('[generate-schemas] Tamamlandı.');
}

main().catch((err) => {
  console.error('[generate-schemas] Başarısız oldu:', err);
  process.exit(1);
});

CmsConfig'iniz şu şekilde görünmelidir

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

package.json dosyamızın içinde, betiğin nasıl çalıştırılacağını ve bazı bağımlılıkları tanımlıyoruz

NOT: Bir tsconfig dosyanız yoksa, --tsconfig bayrağını ve değerini kaldırabilirsiniz

{
  "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",
    "...": "..."
  }
}

Artık, çalıştırdıktan sonra

$ bun run generate-schemas
tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Tamamlandı.

Benzer bir çıktı elde etmeliyiz ve proje yapımızda yeni bir dosya görebiliriz

apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // betiğimizin bulunduğu yer
 generated/
   cms-schema.ts // oluşturulan zod şeması

İçini inceleyebilir ve şemanızın nasıl göründüğünü görebilirsiniz. Bu dosyayı güncellemek için, dev veya build iş akışınıza bağlayabileceğiniz bun run generate-schemas komutunu yeniden çalıştırmanız gerekir.

Ardından bu zod nesnelerini page.tsx dosyamıza şu şekilde alabiliriz

import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';

// nesneleri tür güvenli şekilde ayrıştırmak için petFoodPostSchema.parse(obj) çağırın

Bileşeninizi yönetici panelinden güncelleyebilir ve kolay geliştirme için güncel şemayı tekrar çekebilirsiniz

Previous‹Split Screen JSON Component Builder with LLM