utility or cli to extract response type definition from prismic custom types

[vitordino]

feature request description

prismic surrounds it’s schemas in custom-types a single json file can describe the whole project schema (retrievable from the custom types api, and also the same json can be used to port over this schemas into other prismic projects — using prismic themes or the custom types api aforementioned.

the missing piece to a sounder typescript experience would be to have a type utility that converts this same json (probably saved statically on the project) to output the response json type — we already have individual types for each field, but we need to keep both the prismic dashboard, the json file and the typescript definition for each custom-type in sync, so it’s not only extra burden, but error prone and harder to maintain

description (idea) for the solution

i would like to have a single type that inferred the whole shape for a custom type based on it’s custom-type content:

import { ExtractResponseFromCustomType } from '@prismicio/helpers'
import homepage from '/custom_types/homepage.json'

export type HomePageResponse = ExtractResponseFromCustomType<typeof homepage>
//          └── { _meta: { uid: string }, [...], body: { [...] } }

alternatives considered

1. the described approach
2. a script/cli that would generate the types based on the repository name and/or repository endpoint

[github-actions[bot]]

This issue has been labeled as a feature request since it was created using the 🙋‍♀️ Feature Request Template.

Hi there, thank you so much for your request!

Following our Maintenance Process, we will review your request and get back to you soon. If we decide to implement it, will proceed to implement the feature during the last week of the month. In the meantime, feel free to provide any details to help us better understand your request, such as:

• The context that made you think of this feature request
• As many details about the solution you'd like to see implemented, how it should behave, etc.
• Any alternative solution you have considered

If you think you can implement the proposed change yourself, you're more than welcome to open a pull request implementing the new feature. Check out our quick start guide for a simple contribution process. Please note that submitting a pull request does not guarantee the feature will be merged.

- The Prismic Open-Source Team

[vitordino]

simple example on my project:

retrieved custom type

custom_types/page.json

{
  "Main": {
    "uid": { "type": "UID", "config": { "label": "uid" } },
    "background": { "type": "Color", "config": { "label": "background" } },
    "foreground": { "type": "Color", "config": { "label": "foreground" } },
    "body": {
      "type": "Slices",
      "fieldset": "Slice zone",
      "config": {
        "labels": {},
        "choices": {
          "horizontal": {
            "type": "Slice",
            "fieldset": "Horizontal",
            "description": "horizontal scroll on larger devices",
            "icon": "swap_horiz",
            "display": "grid",
            "non-repeat": {
              "background": { "type": "Color", "config": { "label": "background" } },
              "foreground": { "type": "Color", "config": { "label": "foreground" } }
            },
            "repeat": {
              "image": {
                "type": "Image",
                "config": { "constraint": {}, "thumbnails": [], "label": "image" }
              }
            }
          }
        }
      }
    }
  }
} 

hand-coded typescript (non-exhaustive):

import { ColorField, ImageField } from '@prismicio/types'

export type Colors = {
  background: ColorField
  foreground: ColorField
}

export type UnknownSlice = { type: string }

export type HorizontalSlice = {
  type: 'horizontal'
  primary: Colors
  fields: { image: ImageField }[]
}

export type Slice = HorizontalSlice | UnknownSlice

export type Meta = { _meta: { uid: string } }

export type Page = Meta & Colors & { body: Slice[] }

[angeloashmore]

Hi @vitordino, thanks for the feature request. I agree that this is an important thing to have and would be very useful.

We actually have an experimental tool called prismic-ts-codegen that does exactly this. It takes your Custom Type JSON models (as well as your Shared Slices if you are using Slice Machine) and outputs TypeScript types using @prismicio/types.

You can see how to use it here: https://github.com/prismicio/prismic-ts-codegen

Once it's installed and configured, you can run this command to output types to types.generated.ts (this file location can be customized):

npx prismic-ts-codegen

The tool is an experiment and not something officially supported by Prismic at this time. As such, there may be bugs and you may not see active development on it. This eventually will be integrated into some official workflow, but how it would be used has not been determined yet.

Still, you are free to try it out and let us know what you think. Thanks!