Mark component parameter types incompatible

[lokkeestudios]

Hi everyone,
I just followed the typed.md docs and added a definition for a link mark component override.
However, it seems like the parameter types of the Mark type provided by astro-portabletext/types are incompatible with the actual PortableText component's parameters, as you can see from the following type error:

Type '(_props: Props) => any' is not assignable to type 'Component<Mark<Record<string, unknown>>>'.
  Types of parameters '_props' and 'props' are incompatible.

The following is the relevant source code of my project, to provide some context:
portable-text.astro:

---
import ExternalLink from '@/components/blog/external-link.astro';
import type { BlogPost } from '@/lib/sanity/get-blog-posts';
import { PortableText as PortableTextInternal } from 'astro-portabletext';

export interface Props {
  content: BlogPost['content'];
}

const { content } = Astro.props;
---

<PortableTextInternal
    value={content}
      mark: {
        link: ExternalLink,
                // ^ this gives the error
      },
    }}
  />

external-link.astro:

---
import type { Props as $, Mark } from 'astro-portabletext/types';

export type Props = $<Mark<{ href: string }>>;

const { node } = Astro.props;
---

<a
  href={node.markDef.href}
  target="_blank"
  rel="noreferrer"
>
  <slot />
</a>

I am not entirely sure if this is a wrong implementation on my end or an issue on your end.
Feedback on this would be very much appreciated! Thank you 😊

[theisel]

Hi @lokkeestudios I tried to reproduce your issue but lucked out. To help me resolve the issue, can you let me know which version of Astro, astro-portabletext and Typescript you're using.

Is the issue only with your Mark component? If you remove it does the error go away?

Enjoy the weekend.

[lokkeestudios]

Hi @theisel thanks for the quick feedback!
Hmm, peculiar. Yea, this issue is only related to the Mark component. I also have custom Block and Type components, and the types for them work perfectly fine. I think it is related to the fact that the Mark component get's passed children as props. There the typings seem to cause the compatibility issues.

Sure thing, there you go (they should all be pretty much the latest versions):

• astro: v3.2.3
• astro-portabletext: v0.9.4
• typescript: v5.2.2

Please let me know if you need anything else from my end :)
Wishing you a lovely weekend too!

[theisel]

Hi @lokkeestudios from what I can gather the warning shows up with Astro 3 and all fine with Astro 2. Astro can build successfully which is a good thing. I'll take a closer look at it tomorrow. Take care.

[lokkeestudios]

@theisel I think so too. It might be that Astro messed around with their component prop typings in v3. I cannot and don't want to downgrade to v2 though. So I really do hope we can figure some solution out here.
Anyway, thank you for the kind support. Be hearing from you!

[theisel]

@lokkeestudios I believe the issue has been fixed 🤞 I'll release the patch soon.

[lokkeestudios]

Hi @theisel I'm afraid the param type incompatibility issue still persists, despite the supposed fix provided in v0.9.5.
The error message merely changed slightly:

Type '(_props: Props) => any' is not assignable to type 'Component<Mark<undefined>>'.
  Types of parameters '_props' and 'props' are incompatible.

[theisel]

@lokkeestudios thanks for letting me know. I'll look into it.

[theisel]

@lokkeestudios I've released a patch for your issue, it should be good now 🤞

Any issues, please let me know.

Enjoy your weekend.

[lokkeestudios]

@theisel This seems like it did fix the type issue indeed. Thanks for providing a fix so quickly! 💯 Much appreciated. Have a good one! 🙂