Group HyperScript tag

[nykula]

• I’ve added tests to confirm my change works.
• (If the change is user-facing) I’ve added my changes to the CHANGELOG.unreleased.md file following the template.
• I’ve read the contributing guidelines.

✨Try the playground for this PR✨

[nykula]

@lydell @streamich @tusharmath How do I keep HyperScript curly brace or short props inline? My patch groups the tag, but you might have a better solution, as you've talked about this earlier.

[alexander-akait]

/cc @prettier/core

[streamich]

@nykula I would try to do it same as in JSX—if there are few attributes, keep them on one line.

<div className={className}>Hello</div>

would be

h('div', {className}, 'Hello')

and

<div
  {...rest}
  style={style}
  className={(rest.className || '') + className}
>
  {children}
</div>

would be

h('div', {
  ...rest,
  style,
  className: (rest.className || '') + className,
},
  children
)

[nykula]

@streamich Yes matching JSX compactness is the goal. I did figure out how to stick the function name and tag together. Where I'm stuck is how to technically get { on the same line. Prettier has a group tool. Lets one treat multiple nodes in a sequence independent of their siblings, as a separate sequence, making it possible to keep short literal tokens in one line and other tokens multiline. However the {, unlike the function name and tag, is not an individual node, but a part of an object literal which is a node in its entirety. Prettier forces all nodes in a sequence onto split lines when they don't all fit in one line, even when they consitute a group independent of other nodes. When I add the object literal to the group, it outputs AFAIR either one of these no matter what solution I try:

h(
'div',
{
  ...rest,
  style,
  className: (rest.className || '') + className,
},

  children
);
h('div',
  {
    ...rest,
    style,
    className: (rest.className || '') + className,
  },
  children
);

I kept the second so far. Would be nice if anyone reading this cloned the pull request code and played with trying to get the { inline where I have the 'div', but leave the rest of the object split with newlines and no indent, without resulting in that extra newline at the end, thus replicating your example.

[j-f1]

You could put just the children in the group, something like this:

concat([
  'h(',
  name,
  ', ',
  props,
  group(indent(concat([hardline, ...children]))),
  hardline,
  ')',
])

[PascalPixel]

This is a good start, perhaps try to get the first and second arguments of a function on one line if they are <80 width combined, separately of 3rd or 4th etc argument length?

[nykula]

@PascalPixel It'd be great if you could try implementing that, maybe in a new pull request. For the HyperScript code I've been writing more recently, I apply a different tool, clang-format -style=Google, which behaves like you suggest.