prismicio / prismic-ts-codegen

A Prismic model-to-TypeScript-type generator.
Apache License 2.0
18 stars 6 forks source link

Should support tabbed custom types #11

Closed seanlail closed 2 years ago

seanlail commented 2 years ago

Again, I love this repo! I'm using it and finding it excellent.

I just found this issue and I'm not sure how to fix it. If I have tabbed sections in a custom type the type generated does not know about this and all the fields are collapsed in to 1 type.

Versions

Reproduction

Custom Type ```json { "Main" : { "uid" : { "type" : "UID", "config" : { "label" : "main_uid" } }, "main_title" : { "type" : "StructuredText", "config" : { "single" : "heading1,heading2,heading3,heading4,heading5,heading6", "label" : "main_title" } } }, "Tab" : { "tab_title" : { "type" : "StructuredText", "config" : { "single" : "heading1,heading2,heading3,heading4,heading5,heading6", "label" : "tab_title" } }, "tab_rich_text" : { "type" : "StructuredText", "config" : { "multi" : "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl", "allowTargetBlank" : true, "label" : "tab_rich_text" } } } } ```
Screenshots | Main | Tab | | --- | --- | | image | image |

Steps to reproduce

What is expected?

Types are generated with "Main" and "Tab" fields separated.

What is actually happening?

Generated type actually looks like this

interface TabbedPageDocumentData {
    /**
     * main_title field in *Tabbed Page*
     *
     * - **Field Type**: Title
     * - **Placeholder**: *None*
     * - **API ID Path**: tabbed_page.main_title
     * - **Documentation**: https://prismic.io/docs/core-concepts/rich-text-title
     *
     */
    main_title: prismicT.TitleField;
    /**
     * tab_title field in *Tabbed Page*
     *
     * - **Field Type**: Title
     * - **Placeholder**: *None*
     * - **API ID Path**: tabbed_page.tab_title
     * - **Documentation**: https://prismic.io/docs/core-concepts/rich-text-title
     *
     */
    tab_title: prismicT.TitleField;
    /**
     * tab_rich_text field in *Tabbed Page*
     *
     * - **Field Type**: Rich Text
     * - **Placeholder**: *None*
     * - **API ID Path**: tabbed_page.tab_rich_text
     * - **Documentation**: https://prismic.io/docs/core-concepts/rich-text-title
     *
     */
    tab_rich_text: prismicT.RichTextField;
}
angeloashmore commented 2 years ago

Hi @seanlail, thanks for the detailed bug report.

This is actually the expected behavior; Prismic's Rest API does not separate fields in different tabs in the API response. Tabs are only used in the editing interface.

Because the API "flattens" tabs into one data property, the generated types should also match this.

What we could do, however, is add the tab name in the generated TSDoc comment. Do you think this would be helpful?

It could look like this:

/**
 * main_title field in *Tabbed Page*
 *
 * - **Field Type**: Title
 * - **Placeholder**: *None*
 * - **Tab**: Main
 * - **API ID Path**: tabbed_page.main_title
 * - **Documentation**: https://prismic.io/docs/core-concepts/rich-text-title
 *
 */

Note the new Tab list item. What do you think?

seanlail commented 2 years ago

Because the API "flattens" tabs into one data property, the generated types should also match this.

I didn't know this - completely agree and this makes sense then.

If it's easy to implement then the tab in the TSDoc comment could be good - I guess it's not a huge requirement though as it won't make using tabs easier... but as you explained, this is how the API works anyway.

angeloashmore commented 2 years ago

This is implemented in v0.0.4. For more details, see #13.

Thanks for the suggestion @seanlail! 🙂

seanlail commented 2 years ago

Fantastic. Thanks @angeloashmore