Component Zod Pull

Obtén la descripción de Zod de tus componentes en tiempo de compilación mediante un script

Esta característica te permite obtener la descripción de tu componente en forma de una descripción "Zod" con tipado seguro, que proporciona validación de esquemas con enfoque TS-first e inferencia estática de tipos para tu contenido.

https://zod.dev

Para obtener nuestro esquema de Zod, vamos a cargar algunas dependencias y crear un script que utilice algunas utilidades de nuestro cms-renderer.

Comencemos con la estructura de nuestro proyecto

apps/
 web/
 app/
   page.tsx
 scripts/
   generate-schemas.ts // aquí es donde vive nuestro script

Ahora editaremos este archivo generated-schema.ts

import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // importando mi configuración

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);
});

Tu CmsConfig debería verse así

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

Dentro de nuestro package.json, definimos cómo ejecutar el script y algunas dependencias

NOTA: Si no tienes un tsconfig, entonces puedes eliminar la marca --tsconfig y su valor

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

Ahora, después de ejecutar

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

Deberíamos obtener una salida similar y podremos ver un archivo nuevo en la estructura de nuestro proyecto

apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // aquí es donde vive nuestro script
 generated/
   cms-schema.ts // esquema de zod generado

Puedes inspeccionarlo por dentro y ver cómo luce tu esquema. Para actualizar este archivo, tienes que ejecutar de nuevo el comando bun run generate-schemas, que puedes vincular a tu flujo de trabajo de dev o build.

Luego podemos extraer estos objetos de Zod en nuestro archivo page.tsx de la siguiente manera

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

// llama a petFoodPostSchema.parse(obj) para el análisis con tipado seguro de objetos

Puedes actualizar tu componente desde el panel de administración y volver a extraer el esquema actualizado para facilitar el desarrollo

Previous‹json y código de Claude