Pornire rapidă

O postare despre scheme

Generați scheme Zod sigure din punct de vedere al tipurilor

Această funcționalitate vă permite să obțineți descrierea componentelor în forma unei scheme Zod sigure din punct de vedere al tipurilor, oferind:

Validare a schemelor orientată pe TypeScript
Inferență statică a tipurilor

Aflați mai multe: https://zod.dev

Configurare

Pentru a prelua schema Zod, va trebui să:

Încărcați dependențele necesare
Creați un script folosind utilitare din cms-renderer

Structura proiectului

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # fișier script

Script: `generated-schema.ts`

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

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

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL nu este setată. Configurați-o în mediul dvs. sau în fișierul .env.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID nu este setat. Configurați-l în mediul dvs. sau în fișierul .env.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY nu este setată. Configurați-o în mediul dvs. sau în fișierul .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] API-ul nu a returnat nicio componentă. Verificați dacă PROFOUND_API_KEY este validă și indică spre site-ul corect.'
    );
  }

  console.log(
    `[generate-schemas] Au fost găsite ${schemas.length} componente: ${schemas.map((s) => s.name).join(', ')}`
  );

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

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

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

Exemplu de configurare CMS

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

Configurarea `package.json`

Notă: Dacă nu aveți un tsconfig.json, eliminați indicatorul --tsconfig.

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

Rularea scriptului

bun run generate-schemas

Exemplu de ieșire:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Au fost găsite 3 componente: post, categories, header
[generate-schemas] Gata.

Structura proiectului actualizată

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts
    generated/
      cms-schemas.ts   # schemă Zod generată

Utilizare în `page.tsx`

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

// Utilizați pentru parsare sigură din punct de vedere al tipurilor
petFoodPostSchema.parse(obj);

Note

Inspectați fișierul generat pentru a înțelege structura componentei
Rulați din nou scriptul ori de câte ori structura componentei se modifică:

bun run generate-schemas

Puteți integra acest lucru în fluxul de lucru de dezvoltare sau de build
Actualizați componentele prin panoul de administrare, apoi regenerați local

NextSplit Screen JSON Component Builder with LLM›

Pornire rapidă

O postare despre scheme

Generați scheme Zod sigure din punct de vedere al tipurilor

Această funcționalitate vă permite să obțineți descrierea componentelor în forma unei scheme Zod sigure din punct de vedere al tipurilor, oferind:

Validare a schemelor orientată pe TypeScript
Inferență statică a tipurilor

Aflați mai multe: https://zod.dev

Configurare

Pentru a prelua schema Zod, va trebui să:

Încărcați dependențele necesare
Creați un script folosind utilitare din cms-renderer

Structura proiectului

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # fișier script

Script: `generated-schema.ts`

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

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

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL nu este setată. Configurați-o în mediul dvs. sau în fișierul .env.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID nu este setat. Configurați-l în mediul dvs. sau în fișierul .env.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY nu este setată. Configurați-o în mediul dvs. sau în fișierul .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] API-ul nu a returnat nicio componentă. Verificați dacă PROFOUND_API_KEY este validă și indică spre site-ul corect.'
    );
  }

  console.log(
    `[generate-schemas] Au fost găsite ${schemas.length} componente: ${schemas.map((s) => s.name).join(', ')}`
  );

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

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

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

Exemplu de configurare CMS

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

Configurarea `package.json`

Notă: Dacă nu aveți un tsconfig.json, eliminați indicatorul --tsconfig.

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

Rularea scriptului

bun run generate-schemas

Exemplu de ieșire:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Au fost găsite 3 componente: post, categories, header
[generate-schemas] Gata.

Structura proiectului actualizată

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts
    generated/
      cms-schemas.ts   # schemă Zod generată

Utilizare în `page.tsx`

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

// Utilizați pentru parsare sigură din punct de vedere al tipurilor
petFoodPostSchema.parse(obj);

Note

Inspectați fișierul generat pentru a înțelege structura componentei
Rulați din nou scriptul ori de câte ori structura componentei se modifică:

bun run generate-schemas

Puteți integra acest lucru în fluxul de lucru de dezvoltare sau de build
Actualizați componentele prin panoul de administrare, apoi regenerați local

NextSplit Screen JSON Component Builder with LLM›

Pornire rapidă

Generați scheme Zod sigure din punct de vedere al tipurilor

Configurare

Structura proiectului

Script: generated-schema.ts

Exemplu de configurare CMS

Configurarea package.json

Rularea scriptului

Structura proiectului actualizată

Utilizare în page.tsx

Note

Pornire rapidă

Generați scheme Zod sigure din punct de vedere al tipurilor

Configurare

Structura proiectului

Script: generated-schema.ts

Exemplu de configurare CMS

Configurarea package.json

Rularea scriptului

Structura proiectului actualizată

Utilizare în page.tsx

Note

Script: `generated-schema.ts`

Configurarea `package.json`

Utilizare în `page.tsx`

Script: `generated-schema.ts`

Configurarea `package.json`

Utilizare în `page.tsx`