Type safe allow and disallow#1572
Conversation
|
@DamianKocjan is attempting to deploy a commit to the Puck Team on Vercel. A member of the Team first needs to authorize it. |
chrisvxd
left a comment
chrisvxd
left a comment
There was a problem hiding this comment.
Thanks @DamianKocjan! Some thoughts in the comments.
| @@ -1 +0,0 @@ | |||
| export * from "./Editor"; | |||
There was a problem hiding this comment.
There's no Editor file or folder
| export const TemplateInternal: ComponentConfig< | ||
| TemplateProps, | ||
| keyof Components | ||
| > = { |
There was a problem hiding this comment.
I'm a little hesitant of this API because the config types are already on the edge as it is.
I think a cleaner API would be using our new format:
ComponentConfig<{
props: TemplateProps,
availableComponents: keyof Components
}>
Worth adding, this will be a feat so we'll hold off merge until closer to 0.22
There was a problem hiding this comment.
I'll refactor later this week to use new format ;)
There was a problem hiding this comment.
@chrisvxd Took me more time than I anticipated, but it's done now. Sorry for waiting
| import { DragAxis } from "../../types"; | ||
|
|
||
| export type DropZoneProps = { | ||
| export type DropZoneProps<T = string> = { |
There was a problem hiding this comment.
I'm not sure if Tshould be as it is. Maybe something more descriptive like Components or ComponentKeys
| } from "./Internal"; | ||
|
|
||
| export type SlotComponent = (props?: Omit<DropZoneProps, "zone">) => ReactNode; | ||
| export type SlotComponent<T = string> = ( |
There was a problem hiding this comment.
Same goes here
| ) => ReactNode; | ||
|
|
||
| export type PuckComponent<Props> = ( | ||
| export type PuckComponent<Props, T = string> = ( |
2 participants
Closes #1099
Description
This PR introduces type safety for the
allowanddisallowprops within Puck'sSlot/DropZone.Changes made
Updated
DropZonePropsto use the generic component type forallowanddisallowarrays.How to test
Open a component configuration in a TypeScript environment (e.g.,
apps/demo/config/blocks/Flex/index.tsx).Ensure the component is typed using the new generic:
ComponentConfig<Props, keyof Components>.Inside the render function, find a
Slot.Try to add an allow prop:
Verify: TypeScript should throw an error because
"NonExistentComponent"is not a key in yourComponentstype.Verify: Triggering autocomplete within the
allowarray should suggest valid component names from your config.