Slice type: Slice Simulator x Slice Zone(s) type mismatch

[lihbr]

When typing slices with TypeScript, SliceZone(s) infers their types from the components map prop. This causes a type mismatch from slices provided by Slice Simulator as that cannot be typed(?).

See:

• Slack thread: https://prismic-team.slack.com/archives/CPG31MDL1/p1652279415657769
• Forum thread: https://community.prismic.io/t/slice-simulator-typing-issue/9983

What is expected?

Slice array provided by Slice Simulator should match expected SliceZone slices prop type when slice components are typed.

What is actually happening?

Slice array provided by Slice Simulator doesn't match expected SliceZone slices prop type when slice components are typed.

Potential fixes?

I'm posting this issue here as I'm not sure which kit it really belongs to. I can see few fixes but I don't really like them:

• Typing the slice array provided by Slice Simulator as any;
• Extending the type from SliceZone(s) to always allow for "any slice" on top of "known slices"

[angeloashmore]

Related: prismicio/prismic-react#144

We might be able to solve this specific issue by changing Slice Simulator’s types, but the issue seems to root in SliceZone’s types. It expects both the slices and components Slice types to match, but that currently requires manual typing.

An ideal solution would support untyped props (i.e. using a generic SliceLike type) with the ability to override. The solution might be to remove SliceZoneProps’s TSlice type parameter.

This results in a looser, but more ergonomic, system. Typing Slice components should still work as long as it satisfies SliceLike.

[lihbr]

So... Are we removing the TSlice type parameter, or do we want to explore other solutions? 🤔

I'm fine with this "looser, more ergonomic" solution as you put it ☺️

[angeloashmore]

I spent a decent amount of time on this last week and didn't get to a place that I was happy with. Disconnecting TSlice from the slices prop, while keeping it connected to the components prop, seems like an approach that will work.

I plan to revisit this soon with a fresh start. Maybe an obvious solution will pop up. 🙂

[lihbr]

OK, let me know if I can help!

While using the same types, Vue components aren't able to infer types the same way or use generics so they aren't facing this issue so far 🤔

[angeloashmore]

This is fixed as of prismicio/prismic-react#154. The fix has not been published yet as I would like to bundle it with a few other fixes, but I think it's safe to close this issue.

If we discover that the PR did not fix the issue, we can reopen.