Suggestion add default units for style props

I’m using more and more hyperapp and must admit I like it. Good job.

What I’m describing here is not bug or direct issue with hyperapp. Just want to raise attention for others who might have similar problem.

The problem is that by default hyperapp doesn’t assign any units to style props: width, height, left … As result these styles props are silently ignored by the browser. This is nothing special, that’s how browsers work. It’s same behaviour as assigning style props with bare DOM eg. el.style.height=20 - would not be applied either.

Normally it’s not problem when developer is aware of this, but for people with React background, this would bit surprising, as React handles this somehow.

Example:

Component responsible for rendering usernames from keepassxc db when user click on username login form field).

const CredentialsMenu = ({ top, left }) => {
  const style = { position: 'absolute', top, left };
   return (
    <div style={style}>
      <div>
        <ul >
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>
  );
};

This component needs to be “aligned” to some html input field

const { bottom, left } = inputElement.getBoundingClientRect();
const menuCoords = { top: bottom + scrollY, left: left + scrollX };
...
<CredentialsMenu {...menuCoords} />
...

top left styles will not be applied, only position 'absolute' will.

Fix is quite easy. Just add px unit, but you have to do it for every component.

[SkaterDad]

I agree with @lazarljubenovic that this seems unecessary to be in the core of hyperapp, since it will just add weight and isn’t necessary for all users.

Baking stuff like this into the framework would help some users, but hinder others and potentially make it harder to debug if you aren’t aware of the magical unit conversions behind the scenes. hyperapp’s core appeal to me is how simple and non-magical it is.

Some people will put 100% of their styles in CSS.

Those using inline styles should still understand CSS and what units are needed. A couple helper functions to create the strings make it easier.

const px(num) => num + "px"
const pct(num) => num + "%"
const rem(num) => num + "rem"
...

app({
  view: () => h('div', {
      style: {
        maxWidth: px(200),
        minHeight: pct(100),
        margin: rem(2)
      }
    },
    ['Hello'])
})

[lukejacksonn]

I just tried implementing this… and now I am of the opinion that there are too many cases to cover to do properly… and why are we defaulting to px for dimensional properties… why not rem|em|% 🤔 how is this helping anybody?

It will prevent people getting confused if they enter a numerical value is the argument (and it probably does) but it introduces more magic, which might confuse people in when it comes to other key/values pairs. It is just another thing to have to look up and check support for.

I’m with Elm (and CSS) on this… make it clear to the developer, that they must specify units.