Skip to content

Improve indentation for multiple-line embedded expressions in template strings #776

@ocavue

Description

@ocavue

Describe the bug

dprint-plugin-typescript version: 0.95.15

Input Code

function render_string_template() {
    return `
      <div>
        ${tooltip ? 
          `<my-tooltip>content content content content</my-tooltip>`:  nothing}
        <div>
          ${tooltip ? 
              `<my-tooltip>content content content content</my-tooltip>`:  nothing}
        </div>
      </div>
    `;
}


function render_html_template() {
    return html`
      <div>
        ${tooltip ? 
          html`<my-tooltip>content content content content</my-tooltip>`:  nothing}
        <div>
          ${tooltip ? 
              html`<my-tooltip>content content content content</my-tooltip>`:  nothing}
        </div>
      </div>
    `;
}

Expected Output

prettier playground link

function render_string_template() {
  return `
      <div>
        ${
          tooltip
            ? `<my-tooltip>content content content content</my-tooltip>`
            : nothing
        }
        <div>
          ${
            tooltip
              ? `<my-tooltip>content content content content</my-tooltip>`
              : nothing
          }
        </div>
      </div>
    `;
}

function render_html_template() {
  return html`
    <div>
      ${tooltip
        ? html`<my-tooltip>content content content content</my-tooltip>`
        : nothing}
      <div>
        ${tooltip
          ? html`<my-tooltip>content content content content</my-tooltip>`
          : nothing}
      </div>
    </div>
  `;
}

(Note that Prettier produces different outputs depending on the existence of html, but that's a separate topic (#9) and not the primary focus of this issue.)

Actual Output

dpint playground link

function render_string_template() {
  return `
      <div>
        ${
    tooltip
      ? `<my-tooltip>content content content content</my-tooltip>`
      : nothing
  } ⚠️
        <div>
          ${
    tooltip
      ? `<my-tooltip>content content content content</my-tooltip>`
      : nothing
  } ⚠️
        </div>
      </div>
    `;
}

function render_html_template() {
  return html`
      <div>
        ${
    tooltip
      ? html`<my-tooltip>content content content content</my-tooltip>`
      : nothing
  } ⚠️
        <div>
          ${
    tooltip
      ? html`<my-tooltip>content content content content</my-tooltip>`
      : nothing
  } ⚠️
        </div>
      </div>
    `;
}

The ending } character is broken onto its own line and indented less than the surrounding <div> element, make it visually appears to be outside of the <div> hierarchy.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions