The types of the render functions in the Placeholder component props are not correct or missing

[vsirakova]

Description

• Problem 1: The typing of the renderEach function in the PlaceholderProps does not match the way it is being used in the Placeholder render function. In the props it is typed like this
  renderEach?: (components: React.ReactNode[], data: (ComponentRendering | HtmlElementRendering)[], props: PlaceholderProps) => React.ComponentClass<any> | React.SFC<any>;
  but in the Placeholder render function it is called with a single component and an index, which is correct. The type in the props is wrong.
• Problem 2: The renderEmpty function is not mentioned in the Placeholder props
• Problem 3: All the 3 render, renderEach, renderEmpty functions have a return type not allowing to return a React element

Expected behavior

When I install the sitecore-jss-react package version 12 or 13 in my project and I am using typescript, I would expect to be able to use the renderEach function by providing a component and an index parameter and not having a type error. I would also expect to be able to define a render function on my placeholder and be able to return a react element without getting a type error. And lastly, I would expect to be able to see the type of the renderEmpty function exposed in the PlaceholderProps.

Steps To Reproduce

1. Assuming that you have a react typescript repo using sitecore jss, install version 12 or 13 of sitecore-jss-react
2. Create a component and add a Placeholder inside
3. Try to add a renderEach prop on the Placeholder, for example:

export const renderEach = (component: React.ReactNode, index: number) => (
  <div className="wrapper">{component}</div>
)

export const Component = ({ rendering }: Props) => (
  <Placeholder rendering={rendering} name='main' renderEach={renderEach} />
)

3. Run a type check
4. See error

Additional note

The prop [key: string]: any; is hiding all the type errors from the Placeholder component. The mismatching function prototypes are being accepted as correct because of this prop. If you temporarily comment it out and run a type check, it is clear that the types in Placeholder component are incorrect.

Your Environment

• Sitecore Version: 9.0.2
• JSS Version: 13.0.3
• Browser Name and version: Not applicable
• Operating System and version (desktop or mobile): Not applicable
• Link to your project (if available):

[sc-illiakovalenko]

@vsirakova Merged PR, fix will be released in version 14.0.0.