How to bind to React component with parameter named "type"

1

I’m trying to use a React component that has a property named type. ReScript won’t let me use that. I can only use type_. Here is my workaround. This works but I’d prefer not to use a reserved keyword.

@module("react-rewards") @react.component
external make: (
  ~ref: ReactDOM.domRef=?,
  ~children: React.element=?,
  ~config: config=?,
  ~\"type": [#confetti | #emoji | #memphis]=?,
  unit,
) => React.element = "default"

Why doesn’t this decorator work? The generate javascript still uses type_ not type.

@as("type") ~type_: ...
2

For React components, we specifically created a special cased convention of using a _ prefix for keywords. So in your case, use _type instead:

@module("react-rewards") @react.component
external make: (
  ~ref: ReactDOM.domRef=?,
  ~children: React.element=?,
  ~config: config=?,
  ~_type: [#confetti | #emoji | #memphis]=?,
  unit,
) => React.element = "default"

Usage:

<MyComp _type=#confetti/>

Playground Link

3

I think the vs code extension automatically turned it into type_ not _type. Is this a bug? Actually I will check if I typed it wrong - not sure. Still don’t know why the decorator didn’t work. Finally I’m not sure what you’re describing is documented anywhere - I didn’t find it but did find the escape hatch mechanism for using keywords and the usage was discouraged- hence my question on this forum. Something needs improvement here.

4

There should probably be another note on using _type in scenarios where you want to compile to type instead here… gonna need a new issue on the documentation issue tracker.

it’s not a bug, it just happens to be a confusing convention for the following reasons:

  1. _something is usually a convention for explicitly ignoring unused binding warnings
  2. type_ is our recommendation whenever you insist on using a keyword, because it doesn’t collide with behavior 1)… but this doesn’t do any special transformations to the final JS output
  3. The @react.component transformation implemented some custom behavior for transforming ~_xyz to a JS equivalent of xyz.
  4. Additionally, there’s also a specific name mangling ruleset that was implemented for structural objects… the docs for that were removed for reasons I don’t know, but they are still there in the older v8 docs: Use Illegal Identifier Names | ReScript Language Manual

It’s definitely not the easiest to understand part of the language. Since it’s inherently weird, I am not sure how to document it properly nowadays.

The decorators only work on record attributes — not on labeled arguments, nor on structural object attributes (@react.component annotated make functions turn labeled arguments into a structural object).

5

Filed an issue:

Need better documentation on using ~_type in React · Issue #451 · rescript-association/rescript-lang.org (github.com)