Component Zod Pull

Haal tijdens compileertijd met een script de Zod-beschrijving van je componenten op

Met deze functie kun je de beschrijving van je component ophalen in de vorm van een type-veilige "Zod"-beschrijving, die TS-first schema-validatie en statische type-inferentie voor je content biedt.

https://zod.dev

Om ons Zod-schema op te halen, gaan we enkele dependencies laden en een script maken dat enkele hulpprogramma's uit onze cms-renderer gebruikt.

Laten we beginnen met onze projectstructuur

apps/
 web/
 app/
   page.tsx
 scripts/
   generate-schemas.ts // hier staat ons script

Nu gaan we het bestand generated-schema.ts bewerken

import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // mijn config importeren

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

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL is niet ingesteld. Stel deze in je omgeving of .env-bestand in.'
    );
  }
  if (!websiteId) {
    throw een fout(
      '[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID is niet ingesteld. Stel deze in je omgeving of .env-bestand in.'
    );
  }
  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY is niet ingesteld. Stel deze in je omgeving of .env-bestand in.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] Geen componenten teruggegeven door de API. Controleer dat PROFOUND_API_KEY geldig is en naar de juiste website verwijst.'
    );
  }

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

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

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

Je CmsConfig zou er als volgt uit moeten zien

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

In onze package.json definiëren we hoe we het script uitvoeren en enkele dependencies.

OPMERKING: Als je geen tsconfig hebt, kun je de --tsconfig-vlag en de waarde ervan verwijderen

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

Nu, nadat we hebben uitgevoerd

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

Zouden we een vergelijkbare output moeten krijgen en zien we een nieuw bestand in onze projectstructuur

apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // hier staat ons script
 generated/
   cms-schema.ts // gegenereerd zod-schema

Je kunt erin kijken om te zien hoe je schema eruitziet. Om dit bestand bij te werken, moet je het commando bun run generate-schemas opnieuw uitvoeren, dat je kunt koppelen aan je dev- of build-workflow.

We kunnen deze Zod-objecten vervolgens in ons page.tsx-bestand ophalen zoals hieronder

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

// roep petFoodPostSchema.parse(obj) aan voor typeveilige parsing van objecten

Je kunt je component bijwerken vanuit het beheerpaneel en het bijgewerkte schema opnieuw ophalen voor eenvoudige ontwikkeling.

Previous‹Split Screen JSON Component Builder with LLM