SolidJS•12mo ago

Lowercase props

What is point of lowercase props "tabIndex" vs "tabindex", "onClick" vs "onclick" and etc?

22 Replies

aesthetics, preference to more easily migrate code from react 👉 solid or html 👉 solid

FFOP•12mo ago

Ok.... but what if I have component that has default prop, for expamle "tabIndex". Should I care about both "tabIndex" and "tabindex" or only one of?

bigmistqke•12mo ago

good question from my lil experiment in the playground: i think mergeProp takes care of it wait sorry mb i m wrong that would be kinda weird actually

bigmistqke•12mo ago

ye... that is a bit unexpected behavior

FFOP•12mo ago

From the compiler perspective it is same

get tabindex() {
  return attrs?.tabindex || 228;
},
get tabIndex() {
  return attrs?.tabIndex || -1;
},

get tabindex() {
  return attrs?.tabindex || 228;
},
get tabIndex() {
  return attrs?.tabIndex || -1;
},

Only depends on order. ("tabIndex" has higher order)

bigmistqke•12mo ago

uhu. ok thanks for the q, i m not gonna use lowercase in my own code anymore 🙂 is a good argument of getting rid of lowercase. mb something they could consider for 2.0

FFOP•12mo ago

That would be nice to have only one props/events style. By the way it works as it should, because to override tabIndex props should go first as a first argument of mergeProps.

bigmistqke•12mo ago

mm no that's not the case mergeProps is like { ...obj1, ...obj2 } but the image also didn't tell too much since I was just logging tabIndex

FFOP•12mo ago

I mean mergeProps=(props, {tabIndex: 1})

bigmistqke•12mo ago

I guess the issue is: they can not get rid of lowercase, since they just pass any non-prop attribute as an attribute

FFOP•12mo ago

That should work.

bigmistqke•12mo ago

mm no if props.tabIndex === 0 then mergeProps.tabIndex will still be 1

FFOP•12mo ago

Ok(((

bigmistqke•12mo ago

you can think of it as {...{tabIndex: 0}, ...{tabIndex: 1}}

lxsmnsyc•12mo ago

Not exactly preference but the Solid would give recognition to attributes that are named closer to HTML, so tabindex is favorable over tabIndex

bigmistqke•12mo ago

in practice the camel-case will overwrite regular case tho

bigmistqke•12mo ago

lxsmnsyc•12mo ago

I'm not exactly talking about the runtime but the point is we favor it despite the camel-case being supported In the future we might remove support for it like surely one favors for over htmlFor and class over className

bigmistqke•12mo ago

for sure i would be fine w removing support for camel-case get rid of camel-case and classlist

FFOP•12mo ago

So as I understand it right, we should prefer "tabindex" instead of "tabIndex" and also concerns to events? ("onclick" over "onClick")

lxsmnsyc•12mo ago

well events are a different case since they aren't exactly attributes

FFOP•12mo ago

Got it. Thanks!

Gaming

Programming

Lowercase props