Component Zod Pull

Recupera la descrizione Zod dei tuoi componenti in fase di compilazione utilizzando uno script

Questa funzionalità consente di ottenere la descrizione del componente sotto forma di descrizione "Zod" type-safe, che offre una validazione dello schema TS-first e un'inferenza di tipi statica per il contenuto.

https://zod.dev

Per recuperare il nostro schema Zod, caricheremo alcune dipendenze e creeremo uno script che utilizza alcune utility del nostro cms-renderer

Iniziamo con la struttura del nostro progetto

apps/
 web/
 app/
   page.tsx
 scripts/
   generate-schemas.ts // questo è il file in cui vive il nostro script

Ora modificheremo questo file generated-schema.ts

import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // importiamo la mia configurazione

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

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL non è impostata. Impostala nel tuo ambiente o nel file .env.'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID non è impostato. Impostalo nel tuo ambiente o nel file .env.'
    );
  }
  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY non è impostata. Impostala nel tuo ambiente o nel file .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] Nessun componente restituito dall\'API. Verifica che PROFOUND_API_KEY sia valido e punti al sito corretto.'
    );
  }

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

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

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

Il tuo CmsConfig dovrebbe essere simile a

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

All'interno del nostro package.json definiamo come eseguire lo script e alcune dipendenze

NOTA: Se non hai un tsconfig, puoi rimuovere il flag --tsconfig e il suo valore

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

Ora, dopo aver eseguito

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

Dovremmo ottenere un output simile e potremo vedere un nuovo file nella struttura del progetto

apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // questo è il file in cui vive il nostro script
 generated/
   cms-schema.ts // schema zod generato

Puoi aprirlo per vedere com'è il tuo schema. Per aggiornare questo file devi eseguire nuovamente il comando bun run generate-schemas, che puoi collegare al tuo workflow di dev o build.

Possiamo quindi importare questi oggetti Zod nel nostro file page.tsx in questo modo

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

// chiama petFoodPostSchema.parse(obj) per un parsing type-safe degli oggetti

Puoi aggiornare il tuo componente dal pannello di amministrazione e scaricare nuovamente lo schema aggiornato per facilitare lo sviluppo.

Previous‹Split Screen JSON Component Builder with LLM