Skip to content

Indentation bug when using svelte/indent (RangeError: Maximum call stack size exceeded) #998

New issue

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

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

Already on GitHub? # to your account

Open
2 tasks done
AlbertMarashi opened this issue Jan 7, 2025 · 8 comments
Open
2 tasks done
Labels
formatting help wanted Extra attention is needed

Comments

@AlbertMarashi
Copy link

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

9.17.0

What version of eslint-plugin-svelte are you using?

2.46.1

What did you do?

Configuration
import { includeIgnoreFile } from '@eslint/compat';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import { fileURLToPath } from 'node:url';
import ts from 'typescript-eslint';
const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url));

export default ts.config(
  includeIgnoreFile(gitignorePath),
  ...svelte.configs["flat/recommended"],
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    }
  },
  {
    files: ["**/*.svelte"],

    languageOptions: {
      parserOptions: {
        parser: ts.parser
      }
    },
  },
  {
    rules: {
      "svelte/indent": ["error", {
        indent: 4,
        indentScript: false
      }]
    }
  }
);
<script lang="ts">
let {}: { } = $props()

const Blocks: {
    [X in "bar"]: string 
} = {}
</script>

What did you expect to happen?

ESLint should not crash

What actually happened?

Oops! Something went wrong! :(

ESLint: 9.17.0

RangeError: Maximum call stack size exceeded
Occurred while linting /Users/albert/repos/svelte-indent-bug/src/routes/+page.svelte:1
Rule: "svelte/indent"
    at Map.get (<anonymous>)
    at OffsetCalculator.getExpectedIndentFromIndex (/Users/albert/repos/svelte-indent-bug/node_modules/eslint-plugin-svelte/lib/rules/indent-helpers/offset-context.js:173:41)
    at OffsetCalculator.getExpectedIndentFromIndex (/Users/albert/repos/svelte-indent-bug/node_modules/eslint-plugin-svelte/lib/rules/indent-helpers/offset-context.js:183:33)
    at OffsetCalculator.getExpectedIndentFromIndex (/Users/albert/repos/svelte-indent-bug/node_modules/eslint-plugin-svelte/lib/rules/indent-helpers/offset-context.js:183:33)
    at OffsetCalculator.getExpectedIndentFromIndex (/Users/albert/repos/svelte-indent-bug/node_modules/eslint-plugin-svelte/lib/rules/indent-helpers/offset-context.js:183:33)
    at OffsetCalculator.getExpectedIndentFromIndex (/Users/albert/repos/svelte-indent-bug/node_modules/eslint-plugin-svelte/lib/rules/indent-helpers/offset-context.js:183:33)
    at OffsetCalculator.getExpectedIndentFromIndex (/Users/albert/repos/svelte-indent-bug/node_modules/eslint-plugin-svelte/lib/rules/indent-helpers/offset-context.js:183:33)
    at OffsetCalculator.getExpectedIndentFromIndex (/Users/albert/repos/svelte-indent-bug/node_modules/eslint-plugin-svelte/lib/rules/indent-helpers/offset-context.js:183:33)
    at OffsetCalculator.getExpectedIndentFromIndex (/Users/albert/repos/svelte-indent-bug/node_modules/eslint-plugin-svelte/lib/rules/indent-helpers/offset-context.js:183:33)
    at OffsetCalculator.getExpectedIndentFromIndex (/Users/albert/repos/svelte-indent-bug/node_modules/eslint-plugin-svelte/lib/rules/indent-helpers/offset-context.js:183:33)

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/AlbertMarashi/svelte-indent-bug

Additional comments

No response

@AlbertMarashi
Copy link
Author

FYI, this makes svelte/indent practically unusable in my project as it occurs across a number of files.

Which greatly reduces my developer productivity as I have to spend time manually fixing indentations

@baseballyama
Copy link
Member

Why don't you use prettier for this?

@AlbertMarashi
Copy link
Author

@baseballyama I don't really want to add another tool to my stack

I am familiar with ESLint

@AlbertMarashi
Copy link
Author

AlbertMarashi commented Jan 7, 2025

@baseballyama out of curiosity, how difficult would it be to entirely avoid indenting-related issues in ts or js script code, and instead allow us to rely purely on a plugin such as "@stylistic/eslint-plugin-ts" who's job is to style that code?

I'm sure this would remove a lot of maintenance overhead, if the svelte/indent rule purely cared about the contents of actual svelte templates instead of script code?

(There is only one slight issue, is that I prefer the script to have 0 indentation at the beginning, which a rule like "@stylistic/ts/indent" doesn't seem to pick up on for whatever reason..)

@AlbertMarashi
Copy link
Author

Thankfully, I can ignore the SvelteScriptElement in it's entirety:

"svelte/indent": ["error", {
    indentScript: false,
    ignoredNodes: ["SvelteScriptElement"],
    alignAttributesVertically: true,
    indent: 4,
}]

However, only issue is that I am unable to catch linting rules for when the script is indented (where I prefer no indentation)

@AlbertMarashi
Copy link
Author

const nodesVisitor = {
...ES.defineVisitor(indentContext),
...SV.defineVisitor(indentContext),
...TS.defineVisitor(indentContext)
};

I think it might be better to remove the ES/TS visitors and just let other ESLints handle such formatting rules, but perhaps merely have a setting for indentScript?

@baseballyama
Copy link
Member

We welcome your PR.

@baseballyama baseballyama added the help wanted Extra attention is needed label Jan 7, 2025
@AlbertMarashi
Copy link
Author

When I get some time, I'll give it a shot if you believe it is the right direction?

Since we no longer need to spend as much time worrying about the formatting of ts/js code, do you think this would help reduce a lot of maintenance overhead?

I also think it would be generally more reliable and preferable to users that rely on other eslint packages which are specifically tailored to the JS/TS code.

Personally, I think eslint-plugin-svelte SHOULD have formatting rules, but it should be specifically focused on the svelte markup only (and basic code formatting, for things like expressions/logic blocks, etc)

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
formatting help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants