Feature Request: Named JSX components

[dkirchhof]

Hey,

JSX components are defined by using a make function, labeled arguments and optional a @jsx.component decorator.

The way I work with components (also in TypeScript) is by defining a props record and refer to theses props explicitly. Example:

type props = { name: string }

let make = props => {
  Console.log(props.name)
  // ...
}

I don’t know why I like it more this way. I don’t get used to labeled arguments.
Unfortunately it doesn’t work with the decorator and props record. So the generated JS code will produce a lot of make functions. It’s not that bad - mostly I don’t care - but it would be nice, if the decorator will also work with records.

Are there any reasons against this feature?

[tsnobip]

I’m not sure what’s the issue here, you’re talking about renaming JSX components in the title but you don’t mention it in your post later.

If you use props records then you don’t need decorators, why would you want both?

When it comes to the generated code, using records or decorators produce the same code cf playground link.

Could you maybe come up with a playground link that illustrates your issue?

[dkirchhof]

The problem is stated in the docs as well:

Handwritten Components

You don’t need to use the @react.component decorator to write components that can be used in JSX. Instead you can write the make function with type props and these will always work as React components. But then you will have the issue with the component name being “make” in the React dev tools.
– Components and Props | React –

As you can see in your playground example, the first component will be named “make”, the second “Playground$WithDecorator”.

---

While debugging a bundled spa, I see a lot of make functions. make1, make2, …, make35.

Fortunately there is a comment with the file name above the component declaration:

But where the component is referenced - only the makeN function

[tsnobip]

oh if it’s just a matter of how the function is called, you can choose whatever you want and just add a make function that points to the function name you’ve chosen, I think it does the trick:

module WithRecord = {
  type props = {name: string}

  let withRecord = props => {
    React.string(props.name)
  }

  let make = withRecord
}

playground link

[dkirchhof]

Ah, good advice. Thanks.

[zth]

And by this, you can also rename it to something uppercase if you want, using an escaped identifier:

module WithRecord = {
  type props = {name: string}

  let \"WithRecord\" = props => {
    React.string(props.name)
  }

  let make = \"WithRecord\"
}

ReScript Playground