[v4] Generated StoryblokRichtext type not compatible with renderRichText from @storyblok/js

[mledl]

Current behavior:
We are using @storyblok/js renderRichtext function to render the richtext fetched from Storyblok. After migrating to v4 of the storyblok-cli we noticed that there is a discrepancy in the types generated by the cli and the typ expected by renderRichtext. This becomes a static issue when exactOptionalPropertyTypes: true set in tsconfig.json.

Signature of renderRichtext:

export declare function renderRichText<T = string>(data: StoryblokRichTextNode<T>, options?: StoryblokRichTextOptions<T>): T | undefined;

where

interface StoryblokRichTextNode<T = string> {
  type: StoryblokRichTextNodeTypes;
  content: StoryblokRichTextNode<T>[];
  children?: T;
  attrs?: Record<string, any>;
  text?: string;
}

The generated StoryblokRichtext type:

interface StoryblokRichtext {
	type: string
	content?: StoryblokRichtext[]
	marks?: StoryblokRichtext[]
	attrs?: Record<string, any>
	text?: string
}

Expected behavior:
The type match and renderRichtext can be used as expected.

Steps to reproduce:

1. Generate types using:

storyblok types generate --space <spaceId> --strict

2. Try to call @storyblok/js renderRichtext function with a some attribute of type StoryblokRichtext generated via the CLI tool.
3. Your tsconfig.json must specify exactOptionalPropertyTypes: true

Other information:
Looking forward to getting this resolved.

[maikmetzger]

I don't know if this is of any help... but I use Nuxt and had a similar issue, switched to

<StoryblokRichText
  v-if="props.blok.text"
  :doc="props.blok.text"
/>

To render the text instead of const text = computed(() => renderRichText(props.blok.text)); with a div with v-html so I don't get the TS error

Argument of type 'StoryblokRichtext | undefined' is not assignable to parameter of type 'StoryblokRichTextNode<string>'.
  Type 'undefined' is not assignable to type 'StoryblokRichTextNode<string>'.ts-plugin(2345).

For anyone using Nuxt. In your case I think that won't help, unfortunately? :/

[matthewyeow]

Hey there, casting seems to work in React:

 <StoryblokRichText
      doc={blok.richtext as StoryblokRichTextNode<React.ReactElement>}
      resolvers={resolvers}
 />

The StoryblokRichText component expects doc to be StoryblokRichTextNode<React.ReactElement>, but blok.richtext is StoryblokRichtext (generated type). This is safe because both types represent the same rich text document structure at runtime. The only difference is that the generated type uses type: string, while the Storyblok library expects type: StoryblokRichTextNodeTypes (a union of specific string literals).