Make template literals more inline

[mohamedmansour]

Describe the bug

dprint version: 0.47.4

It is adding new lines for the functions within template literals. If there was a configuration to NOT add new lines for template literals function, that would be great. Or even disable formatting anything in a template literal.

Input Code

const html = html`
  <ul>
    ${when(x => x.isValid, html`
      <li>${x => x.name}</li>
    `)}
   </ul>
`;

Expected Output

const html = html`
  <ul>
    ${when(x => x.isValid, html`
      <li>${x => x.name}</li>
    `)}
   </ul>
`;

Actual Output

const html = html`
  <ul>
    ${
  when(
    x => x.isValid,
    html`
      <li>${x => x.name}</li>
    `,
  )
}
   </ul>
`;

[dsherret]

Duplicate of https://github.com/dprint/dprint-plugin-typescript/issues/9

[dsherret]

Sorry, I only looked at the title of this and not the body.

[mohamedmansour]

Similar bug to biomejs https://github.com/biomejs/biome/issues/3334 embedded language support is needed for formatting

[warpfork]

Also ran into this today. My example had an outcome like:

render(
	html`<main>
		<demo-element
			.wiring=${{
		foo: Foo,
		bar: Bar,
	}}
		></demo-element>
	</main>`,
	document.body,
);

It seems like the formatting kicks back in for the content inside the ${} (because it's typescript again -- sensible enough!)... but the trouble is that it resumes formatting as if the current indentation context is still whatever it was where the template string started.

(OP may have also not expected other formatting to kick in within the interpolation section, but IMO that should be mostly expected. It's the jarring unindentation that the start that just really gets everything off on the wrong foot.)

I see two options for improving this:

without embedded language support...

I wonder if it would make sense to have the current indentation just be taken as whatever the leading whitespace is on the line that contains the interpolation; bump +1 of the typescript indentation settings; and go from there.

This would be more pleasing than the current behavior, and works without needing to understand anything about the template string's structure or formatting, which seems like the good kind of simple.

with embedded language support...

Looks like this may be coming along shortly, already. :)

I think https://github.com/dprint/dprint-plugin-typescript/issues/9 is the issue to watch, but when that is solved, the test fixtures for how that will behave seem to indicate it'll probably address this particular example right away.

... both?

I'm personally psyched for, and will instantly be using, the external formatter stuff when it becomes available, because yeah, my use cases right now are all embedded html too.

But a fallback to taking the literal current indentation could still be useful. I can imagine new DSLs evolving within js template text systems, and a fallback that makes those things come out okay without needed explicit support seems like it would be pretty sweet.