• Stars
    star
    281
  • Rank 147,023 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated about 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Generate TypeScript interfaces from a Contentful environment

contentful-typescript-codegen

Generate typings from your Contentful environment.

  • Content Types become interfaces.
  • Locales (and your default locale) become string types.
  • Assets and Rich Text link to Contentful's types.

At Intercom, we use this in our website to increase developer confidence and productivity, ensure that breaking changes to our Content Types don't cause an outage, and because it's neat.

Usage

yarn add --dev contentful-typescript-codegen

Then, add the following to your package.json:

{
  // ...
  "scripts": {
    "contentful-typescript-codegen": "contentful-typescript-codegen --output @types/generated/contentful.d.ts"
  }
}

Feel free to change the output path to whatever you like.

Next, the codegen will expect you to have created a file called either getContentfulEnvironment.js or getContentfulEnvironment.ts in the root of your project directory, which should export a promise that resolves with your Contentful environment.

The reason for this is that you can do whatever you like to set up your Contentful Management Client. Here's an example of a JavaScript config:

const contentfulManagement = require("contentful-management")

module.exports = function() {
  const contentfulClient = contentfulManagement.createClient({
    accessToken: process.env.CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN,
  })

  return contentfulClient
    .getSpace(process.env.CONTENTFUL_SPACE_ID)
    .then(space => space.getEnvironment(process.env.CONTENTFUL_ENVIRONMENT))
}

And the same example in TypeScript:

import { strict as assert } from "assert"
import contentfulManagement from "contentful-management"
import { EnvironmentGetter } from "contentful-typescript-codegen"

const { CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN, CONTENTFUL_SPACE_ID, CONTENTFUL_ENVIRONMENT } = process.env

assert(CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN)
assert(CONTENTFUL_SPACE_ID)
assert(CONTENTFUL_ENVIRONMENT)

const getContentfulEnvironment: EnvironmentGetter = () => {
  const contentfulClient = contentfulManagement.createClient({
    accessToken: CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN,
  })

  return contentfulClient
    .getSpace(CONTENTFUL_SPACE_ID)
    .then(space => space.getEnvironment(CONTENTFUL_ENVIRONMENT))
}

module.exports = getContentfulEnvironment

Note

ts-node must be installed to use a TypeScript config

Command line options

Usage
  $ contentful-typescript-codegen --output <file> <options>

Options
  --output,      -o  Where to write to
  --poll,        -p  Continuously refresh types
  --interval N,  -i  The interval in seconds at which to poll (defaults to 15)

Example output

Here's an idea of what the output will look like for a Content Type:

interface IBlogPostFields {
  /** Title */
  title: string

  /** Body */
  body: Document

  /** Author link */
  author: IAuthor

  /** Image */
  image: Asset

  /** Published? */
  published: boolean | null

  /** Tags */
  tags: string[]

  /** Blog CTA variant */
  ctaVariant: "new-cta" | "old-cta"
}

/**
 * A blog post.
 */
export interface IBlogPost extends Entry<IBlogPostFields> {}

You can see that a few things are handled for you:

  • Documentation comments are automatically generated from Contentful descriptions.
  • Links, like author, are resolved to other TypeScript interfaces.
  • Assets are handled properly.
  • Validations on symbols and text fields are expanded to unions.
  • Non-required attributes automatically have | null appended to their type.
  • The output is formatted using your Prettier config.

More Repositories

1

intercom-ios

๐Ÿ“ฑ Intercom for iOS, for integrating Intercom into your iOS application.
Objective-C
357
star
2

intercom-node

Node.js bindings for the Intercom API
TypeScript
344
star
3

intercom-php

PHP bindings for the Intercom API
PHP
284
star
4

intercom-rails

The easiest way to install Intercom in a Rails app.
Ruby
274
star
5

intercom-ruby

Ruby bindings for the Intercom API
Ruby
272
star
6

intercom-android

Intercom for Android, for integrating Intercom into your Android application.
257
star
7

python-intercom

Python wrapper for the Intercom API.
Python
222
star
8

ember-href-to

๐Ÿ”— A lightweight alternative to {{link-to}}
JavaScript
191
star
9

ember-undo-stack

๐Ÿ” An undo/redo stack for Ember.js objects
JavaScript
115
star
10

intercom-react-native

React Native wrapper to bridge our iOS and Android SDK
Java
100
star
11

intercom-cordova

Cordova/PhoneGap plugin for Intercom
Objective-C
95
star
12

intercom-go

Go Bindings For Intercom
Go
69
star
13

intercom-java

Java bindings for the Intercom API
Java
61
star
14

intercom-dotnet

Intercom API client library for .NET
C#
59
star
15

hippie_csv

โœŒ๏ธ Tolerant, liberal CSV parsing
Ruby
57
star
16

ember-computed-template-string

โšก One-line string computed properties
JavaScript
47
star
17

cocoapods-mangle

A CocoaPods plugin which mangles the symbols of your dependencies
Ruby
44
star
18

intercom-elixir

Elixir helpers for generating the Intercom snippet and interacting with the Intercom API
Elixir
32
star
19

speakeasy

A tool for creating Go web servers which can be embedded in iOS and Android apps.
Go
29
star
20

intercom-wordpress

Intercom integration with Wordpress
PHP
28
star
21

intercom-twilio-demo

Demonstrating basic Intercom/Twilio functionality
Ruby
26
star
22

state_of_the_nation

An easy way to model state changing over time with ActiveRecord.
Ruby
24
star
23

requisite

Ruby
18
star
24

gocore

A library with a set of standardised functions for applications written in Go at Intercom
Go
10
star
25

intercom-api-postman-collection

9
star
26

Messenger-Quickstart

Quick start code to get you using Intercom locally
HTML
8
star
27

passport-intercom

Passport strategy for Intercom OAuth 2
JavaScript
8
star
28

lease

Lease is a general DynamoDB-based lease implementation
Go
8
star
29

example-basic-javascript-install

Sample project with the Intercom Messenger installed with basic JavaScript
HTML
7
star
30

passport-intercom-example-app

Example web app using passport-intercom
JavaScript
7
star
31

Intercom-OpenAPI

An OpenAPI description for Intercom's REST API
JavaScript
6
star
32

omniauth-intercom

Intercom strategy for OmniAuth
Ruby
6
star
33

oauth2-intercom

Intercom Provider for the OAuth 2.0 Client
PHP
6
star
34

ember-cli-detergent

detect and block blacklisted javascript methods in your code.
JavaScript
6
star
35

example-single-page-app-install

Example single page application with Intercom
JavaScript
5
star
36

expan-intercom

A/B testing library for Python
Python
5
star
37

dropwizard-guice

Use Guice with Dropwizard
Java
5
star
38

ember-hacker-news

JavaScript
5
star
39

intercom-php-rewrite

Work in progress PHP client using Guzzle 6
PHP
4
star
40

prfeed

A way to automate some of the things we do in the code review process (e.g., manual reposting) and improve the visibility of outstanding pull requests.
Ruby
4
star
41

MediaStreamRecorder

Fork of https://github.com/streamproc/MediaStreamRecorder
JavaScript
3
star
42

platform-series-importing-users

Ruby
3
star
43

example-php

Example PHP code for Intercom
PHP
3
star
44

intercom-install-examples

Collection of example applications with the Intercom Messenger installed
PHP
3
star
45

oauth-setup-tutorial

Simple Example of Setting up OAuth in Intercom
Ruby
2
star
46

minicom-public

Skeletal layout of an interview prototype
Ruby
2
star
47

frontend-marketing-test

CSS
1
star
48

docker-sdk

Repo of Dockerfiles for Intercom Docker SDK images
1
star
49

migration_reporter

Provides a rake task to report Active Record migration details to a given URL.
Ruby
1
star
50

example-go

Example go code for Intercom API
Go
1
star
51

pagerduty-guice

A Guice module for PagerDuty with incident key debouncing
Java
1
star
52

example-node

Example node code for the Node Docker image
JavaScript
1
star
53

ember-computed-template-string-parser

Parses string templates and produces Ember computed properties
JavaScript
1
star
54

identity-verification-code-samples

Sample code snippets for setting up Identity Verification in the Intercom Messenger
1
star
55

example-ruby

Example ruby code for the Intercom API
Ruby
1
star