Penarikan Komponen Zod

Ambil deskripsi Zod komponen Anda pada waktu kompilasi menggunakan sebuah skrip

Fitur ini memungkinkan Anda mendapatkan deskripsi komponen Anda dalam bentuk deskripsi "Zod" yang aman terhadap tipe, yang menyediakan validasi skema berorientasi TS dan inferensi tipe statis untuk konten Anda.

https://zod.dev

Untuk menarik skema Zod kita, kita akan memuat beberapa dependensi dan membuat sebuah skrip yang menggunakan beberapa utilitas dari cms-renderer kita

Mari mulai dengan struktur proyek kita

apps/
 web/
 app/
   page.tsx
 scripts/
   generate-schemas.ts // di sinilah skrip kita berada

Sekarang kita akan mengubah berkas generated-schema.ts ini

import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // mengimpor konfigurasi saya

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

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL is not set. Set it in your environment or .env file.'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID is not set. Set it in your environment or .env file.'
    );
  }
  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY is not set. Set it in your environment or .env file.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] No components returned from the API. Check that PROFOUND_API_KEY is valid and points at the right website.'
    );
  }

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

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

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

CmsConfig Anda seharusnya terlihat seperti

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

Di dalam package.json kita, kita mendefinisikan cara menjalankan skrip dan beberapa dependensi

CATATAN: Jika Anda tidak memiliki tsconfig, maka Anda dapat menghapus flag --tsconfig beserta nilainya

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

Sekarang, setelah kita menjalankan

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

Kita akan mendapatkan keluaran serupa, dan kita dapat melihat berkas baru dalam struktur proyek kita

apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // di sinilah skrip kita berada
 generated/
   cms-schema.ts // skema zod yang dihasilkan

Anda dapat memeriksanya dan melihat seperti apa skema Anda. Untuk memperbarui berkas ini, Anda harus menjalankan perintah bun run generate-schemas lagi, yang dapat Anda hubungkan ke alur kerja dev atau build Anda.

Kemudian kita dapat menarik objek zod ini ke dalam berkas page.tsx kita seperti berikut

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

// panggil petFoodPostSchema.parse(obj) untuk parsing objek yang aman tipe

Anda dapat memperbarui komponen Anda dari panel admin dan menarik skema yang diperbarui lagi untuk memudahkan pengembangan

Previous‹Split Screen JSON Component Builder with LLM