A CLI to generate Typescript definitions based on JSON export generated with contentful CLI.
npm install cf-content-types-generatorContentful Content Types (TS Definitions) Generator
USAGE
$ cf-content-types-generator [FILE]
ARGUMENTS
FILE local export (.json)
OPTIONS
-e, --environment=environment environment
-h, --help show CLI help
-o, --out=out output directory
-p, --preserve preserve output folder
-X --v10 create contentful.js v10 types
-r, --response add response types (only for v10 types)
-l, --localized add localized types
-d, --jsdoc add JSDoc comments
-g, --typeguard add type guards
-s, --spaceId=spaceId space id
-t, --token=token management token
-v, --version show CLI version
-a, --host The Management API host
Use a local JSON file to load contentTypes. Flags for spaceId, token and environement will be ignored.
Will print result to console
cf-content-types-generator path/to/exported/file.jsonin a real world scenario, you would pipe the result to a file.
Will store resulting files in target directory
cf-content-types-generator path/to/exported/file.json -o path/to/target/out/directoryexisting directory content will be removed.
If no file arg provided, remote mode is enabled.
spaceId and token flags need to be set.
cf-content-types-generator -s 2l3j7k267xxx -t CFPAT-64FtZEIOruksuaE_Td0qBvHdELNWBCC0fZUWq1NFxxxAs input a json file with a contentTypes field is expected:
{
"contentTypes": [
{
"sys": {
"id": "artist",
"type": "ContentType"
},
"displayField": "name",
"name": "Artist",
"fields": [
{
"id": "name",
"name": "Name",
"type": "Symbol",
"required": true,
"validations": [
{
"unique": true
}
]
},
{
"id": "profilePicture",
"name": "Profile Picture",
"type": "Link",
"required": false,
"validations": [
{
"linkMimetypeGroup": ["image"]
}
],
"linkType": "Asset"
},
{
"id": "bio",
"name": "Bio",
"type": "RichText",
"required": false,
"validations": [
{
"nodes": {}
},
{
"enabledMarks": [],
"message": "Marks are not allowed"
},
{
"enabledNodeTypes": [],
"message": "Nodes are not allowed"
}
]
}
]
},
{
"sys": {
"id": "artwork",
"type": "ContentType"
},
"displayField": "name",
"name": "Artwork",
"fields": [
{
"id": "name",
"name": "Name",
"type": "Symbol",
"required": true,
"validations": []
},
{
"id": "type",
"name": "Type",
"type": "Symbol",
"required": false,
"validations": [
{
"in": ["print", "drawing", "painting"],
"message": "Hello - this is a custom error message."
}
]
},
{
"id": "preview",
"name": "Preview",
"type": "Array",
"required": false,
"validations": [],
"items": {
"type": "Link",
"validations": [
{
"linkMimetypeGroup": ["image", "audio", "video"]
}
],
"linkType": "Asset"
}
},
{
"id": "artist",
"name": "Artist",
"type": "Link",
"required": true,
"validations": [
{
"linkContentType": ["artist"]
}
],
"linkType": "Entry"
}
]
}
]
}This example shows a subset of the actual payload provided by contentful's cli export command.
import * as CFRichTextTypes from '@contentful/rich-text-types';
import { Entry, EntryFields } from 'contentful';
export interface TypeArtistFields {
name: Contentful.EntryFields.Symbol;
profilePicture?: Contentful.Asset;
bio?: EntryFields.RichText;
}
export type TypeArtist = Entry<TypeArtistFields>;
export interface TypeArtworkFields {
name: EntryFields.Symbol;
type?: 'print' | 'drawing' | 'painting';
preview?: Asset[];
artist: Entry<TypeArtistFields>;
}
export type TypeArtwork = Entry<TypeArtworkFields>;This all only works if you add the contentful package to your target project to get all relevant type definitions.
Extend the default BaseContentTypeRenderer class, or implement the ContentTypeRenderer interface for custom rendering.
Relevant methods to override:
| Methods | Description | Override |
|---|---|---|
render |
Enriches a SourceFile with all relevant nodes |
To control content type rendering (you should know what you're doing) |
getContext |
Returns new render context object | To define custom type renderer and custom module name function |
addDefaultImports |
Define set of default imports added to every file | To control default imported modules |
renderField |
Returns a PropertySignatureStructure representing a field property |
To control Field property rendering |
renderFieldType |
Returns a string representing a field type |
To control field type rendering (recommended) |
renderEntry |
Returns a TypeAliasDeclarationStructure representing an entry type alias |
To control entry type alias rendering |
renderEntryType |
Returns a string representing an entry type |
To control entry type rendering (recommended) |
Table represents order of execution
Set content type renderers:
import {
CFDefinitionsBuilder,
DefaultContentTypeRenderer,
LocalizedContentTypeRenderer,
} from 'cf-content-types-generator';
const builder = new CFDefinitionsBuilder([
new DefaultContentTypeRenderer(),
new LocalizedContentTypeRenderer(),
]);A renderer to render type fields and entry definitions. For most scenarios, this renderer is sufficient.
If no custom renderers given, CFDefinitionsBuilder creates a DefaultContentTypeRenderer by default.
import { CFDefinitionsBuilder, DefaultContentTypeRenderer } from 'cf-content-types-generator';
const builder = new CFDefinitionsBuilder([new DefaultContentTypeRenderer()]);A renderer to render type fields and entry definitions compatible with contentful.js v10.
import { CFDefinitionsBuilder, V10ContentTypeRenderer } from 'cf-content-types-generator';
const builder = new CFDefinitionsBuilder([new V10ContentTypeRenderer()]);Add additional types for localized fields. It adds utility types to transform fields into localized fields for given locales
More details on the utility types can be found here: Issue 121
Note that these types are not needed when using V10ContentTypeRenderer as the v10 entry type already supports localization.
import {
CFDefinitionsBuilder,
DefaultContentTypeRenderer,
LocalizedContentTypeRenderer,
} from 'cf-content-types-generator';
const builder = new CFDefinitionsBuilder([
new DefaultContentTypeRenderer(),
new LocalizedContentTypeRenderer(),
]);export interface TypeCategoryFields {
title: Contentful.EntryFields.Text;
icon?: Contentful.Asset;
categoryDescription?: Contentful.EntryFields.Text;
}
export type TypeCategory = Contentful.Entry<TypeCategoryFields>;
export type LocalizedTypeCategoryFields<Locales extends keyof any> = LocalizedFields<
TypeCategoryFields,
Locales
>;
export type LocalizedTypeCategory<Locales extends keyof any> = LocalizedEntry<
TypeCategory,
Locales
>;const localizedCategory: LocalizedTypeCategory<'DE-de' | 'En-en'> = {
fields: {
categoryDescription: {
'DE-de': 'german description',
'En-en': 'english description',
},
},
};Adds JSDoc Comments to every Entry type and Field type (created by the default renderer, or a renderer that creates the same entry and field type names). This renderer can be customized through renderer options.
JSDocContentTypeRenderer can only render comments for already rendered types. It's essential to add it after the default renderer, or any renderer that creates entry and field types based on the context moduleName resolution.
import { CFDefinitionsBuilder, JsDocRenderer } from 'cf-content-types-generator';
const builder = new CFDefinitionsBuilder([new DefaultContentTypeRenderer(), new JsDocRenderer()]);import * as Contentful from 'contentful';
/**
* Fields type definition for content type 'TypeAnimal'
* @name TypeAnimalFields
* @type {TypeAnimalFields}
* @memberof TypeAnimal
*/
export interface TypeAnimalFields {
/**
* Field type definition for field 'bread' (Bread)
* @name Bread
* @localized false
*/
bread: Contentful.EntryFields.Symbol;
}
/**
* Entry type definition for content type 'animal' (Animal)
* @name TypeAnimal
* @type {TypeAnimal}
*/
export type TypeAnimal = Contentful.Entry<TypeAnimalFields>;Adds type guard functions for every content type
import {
CFDefinitionsBuilder,
DefaultContentTypeRenderer,
TypeGuardRenderer,
} from 'cf-content-types-generator';
const builder = new CFDefinitionsBuilder([
new DefaultContentTypeRenderer(),
new TypeGuardRenderer(),
]);import { Entry, EntryFields } from 'contentful';
import type { WithContentTypeLink } from 'TypeGuardTypes';
export interface TypeAnimalFields {
bread: EntryFields.Symbol;
}
export type TypeAnimal = Entry<TypeAnimalFields>;
export function isTypeAnimal(entry: WithContentTypeLink): entry is TypeAnimal {
return entry.sys.contentType.sys.id === 'animal';
}Adds type guard functions for every content type which are compatible with contentful.js v10.
import {
CFDefinitionsBuilder,
V10ContentTypeRenderer,
V10TypeGuardRenderer,
} from 'cf-content-types-generator';
const builder = new CFDefinitionsBuilder([
new V10ContentTypeRenderer(),
new V10TypeGuardRenderer(),
]);import type {
ChainModifiers,
Entry,
EntryFieldTypes,
EntrySkeletonType,
LocaleCode,
} from 'contentful';
export interface TypeAnimalFields {
bread?: EntryFieldTypes.Symbol;
}
export type TypeAnimalSkeleton = EntrySkeletonType<TypeAnimalFields, 'animal'>;
export type TypeAnimal<Modifiers extends ChainModifiers, Locales extends LocaleCode> = Entry<
TypeAnimalSkeleton,
Modifiers,
Locales
>;
export function isTypeAnimal<Modifiers extends ChainModifiers, Locales extends LocaleCode>(
entry: Entry<EntrySkeletonType, Modifiers, Locales>,
): entry is TypeAnimal<Modifiers, Locales> {
return entry.sys.contentType.sys.id === 'animal';
}Adds response types for every content type which are compatible with contentful.js v10.
import {
CFDefinitionsBuilder,
V10ContentTypeRenderer,
ResponseTypeRenderer,
} from 'cf-content-types-generator';
const builder = new CFDefinitionsBuilder([
new V10ContentTypeRenderer(),
new ResponseTypeRenderer(),
]);import type {
ChainModifiers,
Entry,
EntryFieldTypes,
EntrySkeletonType,
LocaleCode,
} from 'contentful';
export interface TypeAnimalFields {
bread?: EntryFieldTypes.Symbol;
}
export type TypeAnimalSkeleton = EntrySkeletonType<TypeAnimalFields, 'animal'>;
export type TypeAnimal<Modifiers extends ChainModifiers, Locales extends LocaleCode> = Entry<
TypeAnimalSkeleton,
Modifiers,
Locales
>;
export type TypeAnimalWithoutLinkResolutionResponse = TypeAnimal<'WITHOUT_LINK_RESOLUTION'>;
export type TypeAnimalWithoutUnresolvableLinksResponse = TypeAnimal<'WITHOUT_UNRESOLVABLE_LINKS'>;
export type TypeAnimalWithAllLocalesResponse<Locales extends LocaleCode = LocaleCode> =
TypeAnimal<'WITH_ALL_LOCALES'>;
export type TypeAnimalWithAllLocalesAndWithoutLinkResolutionResponse<
Locales extends LocaleCode = LocaleCode,
> = TypeAnimal<'WITH_ALL_LOCALES' | 'WITHOUT_LINK_RESOLUTION', Locales>;
export type TypeAnimalWithAllLocalesAndWithoutUnresolvableLinksResponse<
Locales extends LocaleCode = LocaleCode,
> = TypeAnimal<'WITH_ALL_LOCALES' | 'WITHOUT_UNRESOLVABLE_LINKS', Locales>;If you're not a CLI person, or you want to integrate it with your tooling workflow, you can also directly use the CFDefinitionsBuilder from cf-definitions-builder.ts
import CFDefinitionsBuilder from 'cf-content-types-generator';
const stringContent = new CFDefinitionsBuilder()
.appendType({
name: 'My Entry',
sys: {
id: 'myEntry',
type: 'ContentType',
},
fields: [
{
id: 'myField',
name: 'My Field',
type: 'Symbol',
required: true,
validations: [],
disabled: false,
localized: false,
omitted: false,
},
],
})
.toString();
console.log(stringContent);
// import { Entry, EntryFields } from "contentful";
//
// export interface TypeMyEntryFields {
// myField: EntryFields.Symbol;
// }
//
// export type TypeMyEntry = Entry<TypeMyEntryFields>;You can use CFDefinitionsBuilder also in a browser environment.
Example: TS Content Types Generator App
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent