solidjs-community / eslint-plugin-solid

Solid-specific linting rules for ESLint.
MIT License
206 stars 24 forks source link

Rule for enumerated boolean attribute #144

Open SarguelUnda opened 2 weeks ago

SarguelUnda commented 2 weeks ago

Describe the need Some html attribute are enumerated boolean meaning they only allow 'true' or 'false' c.f. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable

Typescript for JSX attribute like dragable is boolean | 'true' | 'false' which allow to easily turn on and off such attributes with pattern like <img draggable={condition()} /> instead of having to write <img draggable={condition() ? 'true': 'false'} />. The downside is that it is legal to write <img draggable />. See https://github.com/solidjs/solid/issues/1101 and https://github.com/solidjs/solid/issues/383 as to why the current behavior is not considered a bug in solidjs.

Suggested Solution Adding a new rule that would error on lonely draggable attribute and proposing to fix it by explicitly marking it draggable="true"

Possible Alternatives For fix both draggable="true" and draggable={true} are possible the former get inlined in the template while the latter emit a _$setAttribute(_el$2, "draggable", true); cf https://playground.solidjs.com/anonymous/70183b03-2a82-4c1f-a048-b171b049be31

Additional context From https://gist.github.com/samme/82133b9849a8d6851104e070b56e0ed3 it seems that contenteditable and spellcheck also follow the enumerated rules but from testing they do not lead to the same buggy behavior as draggable so I don't know if the rule should check it too.