JSX usage example not working

[msonnemans]

What version of Hono are you using?

3.5.8

What runtime/platform is your app running on?

local

What steps can reproduce the bug?

1. Create a project in a file with JSX enabled according to the documentation.
2. Copy the example code from the JSX documentation and paste it in index.tsx.

Result: the typescript compiler indicates that there is a type error for the <Layout> component because Layout only accepts children as a string and not a string[].

What is the expected behavior?

For the documented example to have correct typing.

What do you see instead?

The opposite.

Additional information

I think the solution isn't to type Layout with string[]. Instead, I think the fundamental problem should be solved: JSX Elements should be able to take either one or multiple child nodes, as if they had <Fragment> baked in. That way I could create a functional component that can either return a node or returns its children directly. There shouldn't be any distinction.

Consider:

const Example = ({ children, value }: { children: HtmlEscapedString; value: boolean }) => {
  if (value) return children;
  return <div>{children}</div>;
};

const Test1 = (
  <Example value={true}>
    <h1>Foo</h1>
  </Example>
);

const Test2 = (
  <Example value={true}>
    <h2>Foo</h2>
    <h3>Bar</h3>
  </Example>
);

In this example, Test2 will throw a type error. However, if changing the component children type to HtmlEscapedString[], then both Tests will throw an error.

[yusukebe]

Hi @msonnemans!

Thank you for bringing up this issue.

I've created a new PR, #1420. With it, you'll be able to use FC to specify types for function components. I believe this should resolve this issue. If you have some time, could you please check it out?

[msonnemans]

Thanks @yusukebe #1420 looks good! However one immediate note in this case:

const Example: FC<{value: boolean}> = ({ value, children }) => {
  if (value) return children;
  return <div>{children}</div>;
};

It is a common scenario where you want to define a component that either does something with a component or, for some reason, just passes the original children along. At the moment HtmlEscapedString cannot be undefined. I think it should be a possible value as it should simply not render anything (like in react).

[yusukebe]

@msonnemans

Thanks for checking it.

At the moment HtmlEscapedString cannot be undefined. I think it should be a possible value as it should simply not render anything (like in react).

Yeah, I understand what you mean. But, it's difficult to make the types correct, so in this case, you can write like the following:

if (value) return <>{children}</>

This like a "work around", but I think not so bad.

[yusukebe]

This is fixed!