Cannot create a component with generic props with reatomComponent

[MichailShcherbakov]

What happened?

The reatomComponent has next props type:

props: T & { ctx: CtxRender; }

I need to create a component with generic props as shown below:

interface GenericComponentProps<T> {
  items: T
}

const GenericComponent = reatomComponent(<T,>({ ctx, items }: GenericeComponentProps<T>) => {}, 'GenericeComponent');

But obviously ctx is not there.

I tried to import CtxRender and put it in the props but @reatom/npm-react doesn't export it.

So it would be great if you add something like this (inspired by React.PropsWithChildren)

type PropsWithCtx<T = unknown> = T & { ctx: CtxRender };

or at least you should export CtxRender in @reatom/npm-react

Part

Package @reatom/npm-react

Version

3.8.6

What browsers are you seeing the problem on?

Microsoft Edge

Relevant log output

No response

[artalar]

It is imposible in TypeScript to to accept a generic and return it via other generic function. Unfortunatly you shuold cast the component type, like this: const GenericComponent = reatomComponent<BaseProps>(render) as <T extends BaseProps>(prop: T) => JSX.Element

[MichailShcherbakov]

@artalar Maybe I'm wrong, but I think it's possible to avoid component type casting. How about that?

Example

[artalar]

@MichailShcherbakov nice! We need to add this to our sources!

[MichailShcherbakov]

@artalar I'm glad to hear that. I've created a PR with an example how it could be implemented. I've changed the props type inferring to provide more clear props type of components.

In the PR example it will be:

import { reatomComponent, PropsWithCtx } from "@reatom/npm-react";

interface ListProps<T> {
  items: T[];
  onItemClick: (item: T) => void;
}

// const List: <T>(props: ListProps<T>) => JSX.Element
const List = reatomComponent(<T,>({ ctx, items, onItemClick }: PropsWithCtx<ListProps<T>>) => {
  return null;
}, 'List');