Is there a better way to allow Roact components to validate size/positional props?

Programming
#1

When writing Roact components, I always make sure to use t to validate my props. The problem I run in to is I constantly find myself defining validation for Size, Position, AnchorPoint, and LayoutOrder.

For example, I’m currently writing the entry for a message in a list chat:

local ListChatEntry = Roact.Component:extend("ListChatEntry")

ListChatEntry.validateProps = {
	name = t.string,
	message = t.string,
	nameColor = t.Color3,

	LayoutOrder = t.optional(t.number),
	Size = t.optional(t.UDim2),
	Position = t.optional(t.UDim2),
	AnchorPoint = t.optional(t.UDim2),
}

I want this component to be able to have sizing and positional properties applied right on it, so that I don’t have to nest the component in a frame to size and position it.

I always want to have a full list of the props that a component takes, so I think this is unfortunately just a manual process I’ll have to live with. But on the off chance it’s not, is there a way to go about this where I can supply these props without it being so repetitive?

#2

If you’re feeling devilish, one option you have is to extend Roact.Component with what you want to have prebaked.

local PositionalComponent = require(...)

local ListChatEntry = PositionalComponent:extend("ListChatEntry")
ListChatEntry.validateProps = {
	name = t.string,
	message = t.string,
	nameColor = t.Color3,
}

return ListChatEntry

Another, less strong-armed, intrusive option you have is to create a helper function that defines these properties every time:

local ListChatEntry = Roact.Component:extend("ListChatEntry")

ListChatEntry.validateProps = validatePositionalProps({
	name = t.string,
	message = t.string,
	nameColor = t.Color3,
})
1 Like
#3

Both really solid solutions. I think ultimately I value being able to see exactly what a component accepts without having to jump through various layers of abstraction to figure out all the different props. I’m probably going to just stick with the manual way, even if it is tedious, but these are both options I’ll consider in the future.

1 Like
#4

Will the first solution actually work as intended? I presume the parent class does not have it’s validate method called unless it is not defined on the child class. The positional props would cause an error in this case.