Safe binding for html <a> "rel" attribute

1

I am trying to bind properly rel attribute. I know some people would say “just use a string”, but I want something safer.
A poly-variant isn’t enough as rel can contains multiple values (eg: “ugc, nofollow”).
Is there any trick to bind this properly with the ability to pass a simple polyvariant or an array of it, keeping this zero-cost?

Thanks for your help

2

HTML as in real dom? Or jsx

What would you like the final output to look like?

3

It’s for JSX. I mentioned html because at the end it’s for html output. But in my case it’s for react native web :slight_smile:
I wish I could write <Text href rel=#ugc> or <Text href rel=[#ugc, #nofollow]>.
I guess rescript should allow something like <Text href rel=#one(ugc)> or <Text href rel=#many([#ugc, #nofollow])>. I remember there were something named @unwrap but it cannot be used for react component prop binding if I am correct.

4

Right, @unwrap was only for externals.

You might be better off with just:

external toRel: string => rel = "%identity"
external toRelArray: array<string> => rel = "%identity"

Pick a better name and all.

It does impose an extra cognitive burden. But I think all other methods would impose just as much if not more…? Good thing we have decent autocomplete and type hint nowadays. That + put some prominent examples, and you should be good to go.

5

I am not familiar with html stuff. But in the latest release 9.1, you can do something fancy as below:

let toString  = (x  : list< [#ugc, #nofollow] > ) : string  => {
   String.concat (',', (x  : > list<string>))
}

Note even with this, some invariant is still not encoded like you can pass duplicate names like toString( list {#ugc, #ugc}), so I am not sure if it is worth it.