Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect indentation of inner expression in template literal #635

Open
g-plane opened this issue May 11, 2024 · 0 comments
Open

Incorrect indentation of inner expression in template literal #635

g-plane opened this issue May 11, 2024 · 0 comments

Comments

@g-plane
Copy link

g-plane commented May 11, 2024

Describe the bug

The indentation of inner expression in template literal is incorrect. Given the example below, the indentation is based on the return token, which is wrong.

dprint-plugin-typescript version: 0.90.5

Input Code

function run() {
  return `<div class='${prefix} ${prefix}--select' data-${prefix}-uuid='${(
  // @ts-expect-error
  tool[uuidSym]
)}'>
  <select class='${prefix}__select'>
    ${tool.options?.map((option, index) => `
      <option value='${option.value ?? ''}'${option.activated ? ' selected' : ''}>${option.label}</option>
    `).join('')}
  </select>
</div>`
}

Expected Output

There're two possible solutions:

  1. Don't insert linebreaks inside the expression parts of template literals. This is how Prettier and Biome now format.

Prettier playground
Biome playground

function run() {
  return `<div class='${prefix} ${prefix}--select' data-${prefix}-uuid='${
    // @ts-expect-error
    tool[uuidSym]
  }'>
  <select class='${prefix}__select'>
    ${tool.options
      ?.map(
        (option, index) => `
      <option value='${option.value ?? ""}'${option.activated ? " selected" : ""}>${option.label}</option>
    `,
      )
      .join("")}
  </select>
</div>`;
}
  1. Make indentation according to the starting ${. This may be hard because we can't simply apply this if the column of ${ is greater than the column of inner expression. (For example, look at Line 2 in the code below.)
function run() {
  return `<div class='${prefix} ${prefix}--select' data-${prefix}-uuid='${
    // @ts-expect-error
    tool[uuidSym]
  }'>
  <select class='${prefix}__select'>
    ${
      tool.options
        ?.map(
          (option, index) => `
        <option value='${option.value ?? ""}'${option.activated ? " selected" : ""}>${option.label}</option>
      `,
        )
        .join("")
    }
  </select>
</div>`;
}

Actual Output

function run() {
  return `<div class='${prefix} ${prefix}--select' data-${prefix}-uuid='${(
    // @ts-expect-error
    tool[uuidSym]
  )}'>
  <select class='${prefix}__select'>
    ${
    tool.options?.map((option, index) => `
      <option value='${option.value ?? ""}'${
      option.activated ? " selected" : ""
    }>${option.label}</option>
    `).join("")
  }
  </select>
</div>`;
}

playground

This bug is originally caught by @NWYLZW .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant