Component Zod Pull

Trích xuất mô tả Zod của các thành phần của bạn tại thời điểm biên dịch bằng một script

Tính năng này cho phép bạn lấy mô tả của thành phần dưới dạng mô tả "Zod" an toàn kiểu, cung cấp khả năng kiểm tra schema ưu tiên TypeScript và suy luận kiểu tĩnh cho nội dung của bạn.

https://zod.dev

Để kéo schema Zod của chúng ta, chúng ta sẽ nạp một số phụ thuộc và tạo một script sử dụng một vài tiện ích từ cms-renderer của chúng ta

Hãy bắt đầu với cấu trúc dự án của chúng ta

apps/
 web/
 app/
   page.tsx
 scripts/
   generate-schemas.ts // nơi script của chúng ta nằm

Bây giờ chúng ta sẽ chỉnh sửa tệp generated-schema.ts này

import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // nhập cấu hình của tôi

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

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL chưa được thiết lập. Hãy thiết lập trong môi trường của bạn hoặc tệp .env.'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID chưa được thiết lập. Hãy thiết lập trong môi trường của bạn hoặc tệp .env.'
    );
  }
  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY chưa được thiết lập. Hãy thiết lập trong môi trường của bạn hoặc tệp .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] Không có thành phần nào được trả về từ API. Hãy kiểm tra rằng PROFOUND_API_KEY hợp lệ và trỏ tới đúng website.'
    );
  }

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

  console.log('[generate-schemas] Hoàn tất.');
}

main().catch((err) => {
  console.error('[generate-schemas] Thất bại:', err);
  process.exit(1);
});

Cấu hình CmsConfig của bạn sẽ trông như sau

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

Bên trong package.json của chúng ta, chúng ta xác định cách chạy script và một vài phụ thuộc

LƯU Ý: Nếu bạn không có tsconfig, bạn có thể loại bỏ cờ --tsconfig và giá trị của nó

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

Bây giờ, sau khi chúng ta chạy

$ bun run generate-schemas
tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Hoàn tất.

Chúng ta sẽ nhận được đầu ra tương tự và có thể thấy một tệp mới trong cấu trúc dự án của mình

apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // nơi script của chúng ta nằm
 generated/
   cms-schema.ts // schema zod được sinh ra

Bạn có thể kiểm tra bên trong để xem schema của mình trông như thế nào. Để cập nhật tệp này, bạn phải chạy lại lệnh bun run generate-schemas, lệnh mà bạn có thể kết nối với quy trình dev hoặc build của mình.

Sau đó, chúng ta có thể kéo các đối tượng zod này vào tệp page.tsx như sau

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

// gọi petFoodPostSchema.parse(obj) để phân tích đối tượng một cách an toàn kiểu

Bạn có thể cập nhật thành phần của mình từ bảng điều khiển quản trị và kéo schema đã được cập nhật về lại để phát triển thuận tiện hơn

Previous‹Json và claude code