@kentico/kontent-model-generator

This utility generates strongly-typed models based on Content Types in a Kentico Kontent project. The models are supposed to be used together with the Kentico Kontent Typescript SDK.

Usage no npm install needed!

<script type="module">
  import kenticoKontentModelGenerator from 'https://cdn.skypack.dev/@kentico/kontent-model-generator';
</script>

README

npm version Build GitHub license

Kontent Model Generator

The purpose of this project is to help you generate Typescript models based on Kontent by Kentico item types. These models can be used with the Kontent Delivery SDK and enhances your experience by providing strongly typed models.

Installation

Install package globally so you can use it anywhere:

npm i @kentico/kontent-model-generator -g

Generate models with CLI

Go to folder where you want to create models and run:

kontent-generate --projectId=xxx

You may specify other options like:

kontent-generate --projectId=xxx --addTimestamp=false --elementResolver=camelCase

Generate models in code

Apart from generating models via CLI, you may also generate models in code which also gives you some additional configuration options (such as using custom name resolver).

import { generateModelsAsync } from '@kentico/kontent-model-generator';

await generateModelsAsync({
    sdkType: 'delivery',
    projectId: 'da5abe9f-fdad-4168-97cd-b3464be2ccb9',
    addTimestamp: true,
    elementResolver: 'camelCase',
})

Customizing generated file names

You may customize the way filenames are stored on file system using the fileResolver configuration option:

await generateModelsAsync({
  sdkType: 'delivery',
  projectId: 'da5abe9f-fdad-4168-97cd-b3464be2ccb9',
  addTimestamp: true,
  elementResolver: 'camelCase',
  fileResolver: (type) => `model_${type.system.codename}`
});

Customizing generated content type names

You may customize name of content types using the contentTypeResolver configuration option:

await generateModelsAsync({
  sdkType: 'delivery',
  projectId: 'da5abe9f-fdad-4168-97cd-b3464be2ccb9',
  addTimestamp: true,
  elementResolver: 'camelCase',
  contentTypeResolver: (type) => `${textHelper.toPascalCase(type.system.codename)}Model`,
});

Configuration

  • projectId - Id of the Kontent project
  • secureAccessKey- Secure API Key if your Kontent project has secure mode enabled
  • addTimestamp- Indicates if timestamp is added to generated models
  • elementResolver- Name resolver for elements. Available options are: camelCase, pascalCase, snakeCase
  • fileResolver- Name resolver for filenames. Available options are: camelCase, pascalCase, snakeCase
  • sdkType- Type of sdk for which models are generated. Available options are: delivery, management

Example models

Generator creates file for each content type in your project. For example:

movie.ts

import { IContentItem, Elements } from '@kentico/kontent-delivery';

/**
 * Generated by '@kentico/kontent-model-generator@4.0.0' at 'Fri, 08 Oct 2021 10:34:09 GMT'
 */
export type Movie = IContentItem<{
  title: Elements.TextElement;
  released: Elements.DateTimeElement;
  releasecategory: Elements.TaxonomyElement;
  seoname: Elements.UrlSlugElement;
  length: Elements.NumberElement;
  category: Elements.MultipleChoiceElement;
  poster: Elements.AssetsElement;
  stars: Elements.LinkedItemsElement<IContentItem>;
  plot: Elements.RichTextElement;
}>;

actor.ts

import { IContentItem, Elements } from '@kentico/kontent-delivery';

/**
 * Generated by '@kentico/kontent-model-generator@4.0.0' at 'Fri, 08 Oct 2021 10:34:09 GMT'
 */
export type Actor = IContentItem<{
  url: Elements.UrlSlugElement;
  firstName: Elements.TextElement;
  lastName: Elements.TextElement;
  photo: Elements.AssetsElement;
}>;

Generator also creates _project.ts file with strongly typed definitions for languages, content types and taxonomies. You can use these in your poject to easily access codenames / names of these objects instead of using strings as identifiers.

Example project structure

Example _project.ts output:

/**
 * Generated by '@kentico/kontent-model-generator@4.0.0' at 'Thu, 04 Nov 2021 12:46:07 GMT'
 */
export const projectModel = {
  languages: {
    cz: {
      codename: 'cz',
      name: 'Czech',
    },
    en: {
      codename: 'en',
      name: 'English',
    },
  },
  contentTypes: {
    actor: {
      codename: 'actor',
      name: 'Actor',
      elements: {
        url: {
          codename: 'url',
          name: 'Url',
        },
        first_name: {
          codename: 'first_name',
          name: 'First name',
        },
        last_name: {
          codename: 'last_name',
          name: 'Last name',
        },
        photo: {
          codename: 'photo',
          name: 'Photo',
        },
      },
    },
    movie: {
      codename: 'movie',
      name: 'Movie',
      elements: {
        title: {
          codename: 'title',
          name: 'Title',
        },
        released: {
          codename: 'released',
          name: 'Released',
        },
        releasecategory: {
          codename: 'releasecategory',
          name: 'ReleaseCategory',
        },
        seoname: {
          codename: 'seoname',
          name: 'SeoName',
        },
        length: {
          codename: 'length',
          name: 'Length',
        },
        category: {
          codename: 'category',
          name: 'Category',
        },
        poster: {
          codename: 'poster',
          name: 'Poster',
        },
        stars: {
          codename: 'stars',
          name: 'Stars',
        },
        plot: {
          codename: 'plot',
          name: 'Plot',
        },
      },
    },
  },
  taxonomies: {
    movietype: {
      codename: 'movietype',
      name: 'MovieType',
      terms: {
        student: {
          codename: 'student',
          name: 'Student',
          terms: {},
        },
        film: {
          codename: 'film',
          name: 'Film',
          terms: {
            tv: {
              codename: 'tv',
              name: 'TV',
              terms: {},
            },
            blockbuster: {
              codename: 'blockbuster',
              name: 'Blockbuster',
              terms: {},
            },
            cinema_only: {
              codename: 'cinema_only',
              name: 'Cinema only',
              terms: {},
            },
          },
        },
      },
    },
    releasecategory: {
      codename: 'releasecategory',
      name: 'ReleaseCategory',
      terms: {
        global_release: {
          codename: 'global_release',
          name: 'Global release',
          terms: {},
        },
        us_only: {
          codename: 'us_only',
          name: 'US only',
          terms: {},
        },
        local_release: {
          codename: 'local_release',
          name: 'Local release',
          terms: {},
        },
      },
    },
  },
};

Contribution & Feedback

Contributions are welcomed. Simply make a pull request.