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

Formatting can break syntax when using Typescript #352

Open
scoopandrun opened this issue Mar 9, 2023 · 2 comments
Open

Formatting can break syntax when using Typescript #352

scoopandrun opened this issue Mar 9, 2023 · 2 comments
Labels
enhancement New feature or request

Comments

@scoopandrun
Copy link

When writing Typescript code in the "HTML" (or "body") part of a Svelte component, I came across a formatting issue that broke the syntax of the code.

The code in question follows below.
I duplicated the line in the script tag and the "body" part to show that the two parts behave differently.
The first code block is before formatting; the second is after formatting.

Before formatting:

<script lang="ts">
  Array.from<Element>(document.querySelectorAll("textarea")).includes(document.activeElement);
</script>

{Array.from<Element>(document.querySelectorAll("textarea")).includes(document.activeElement)}

After formatting:

<script lang="ts">
  Array.from<Element>(document.querySelectorAll("textarea")).includes(
    document.activeElement
  );
</script>

{Array.from <
  Element >
  document.querySelectorAll("textarea").includes(document.activeElement)}

As you can see in the "body" part of the component, from<Element>( became seriously modified with spaces and line breaks where there shouldn't be and syntax highlighting being lost (in VS Code).
Furthermore, the formatting operation removed some parentheses (initially surrounding document.querySelectorAll("textarea")), thus breaking the code syntax.

The <script> part is correctly formatted without breaking anything.

I tried the same line in a .ts file (with only this line), formatted with Prettier and everything went well (just as in the <script> tag above).
So I think this is an issue with this plugin, not with Prettier.

Interestingly, I tried with shorter lines to see if that could resolve the issue, but it didn't. Here are the results:

Before formatting:

<script lang="ts">
  let a: Element;

  Array.from<Element>(document.querySelectorAll("*")).includes(a);
</script>

{Array.from<Element>(document.querySelectorAll("*")).includes(a)}

After formatting:

<script lang="ts">
  let a: Element;

  Array.from<Element>(document.querySelectorAll("*")).includes(a);
</script>

{Array.from < Element > document.querySelectorAll("*").includes(a)}

Here again, in the "body" part, spaces around the type Element and parentheses removed in the following part of the code.
And the <script> tag is correctly formatted.

@scoopandrun
Copy link
Author

I just realized that apparently you can't use Typescript at all in curly braces in the "body" part of a component code, even if the script tag is <script lang="ts">.

@dummdidumm
Copy link
Member

Blocked by sveltejs/svelte#4701

@dummdidumm dummdidumm added the enhancement New feature or request label Mar 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants