sveltejs / svelte-eslint-parser

Svelte parser for ESLint
https://sveltejs.github.io/svelte-eslint-parser/
MIT License
88 stars 19 forks source link

svelte parsing error in template literals #346

Open AdrianGonz97 opened 1 year ago

AdrianGonz97 commented 1 year ago

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

What version of ESLint are you using?

8.41.0

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

2.29.0

What did you do?

Configuration ``` module.exports = { root: true, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:svelte/recommended', 'prettier' ], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], parserOptions: { sourceType: 'module', ecmaVersion: 2020, extraFileExtensions: ['.svelte'] }, env: { browser: true, es2017: true, node: true }, overrides: [ { files: ['*.svelte'], parser: 'svelte-eslint-parser', parserOptions: { parser: '@typescript-eslint/parser' } } ] }; ```
<script>
    let workaround = setInitialClassState.toString();

    function setInitialClassState() {
        // does something
    }
</script>

<svelte:head>
    <!-- This causes the new eslint-plugin-svelte to throw a parsing error -->
    {@html `<script nonce="%sveltekit.nonce%">(${setInitialClassState.toString()})();</script>`}

    <!-- This is works -->
    {@html `<script nonce="%sveltekit.nonce%">(` + workaround + `)();</script>`}
</svelte:head>

What did you expect to happen?

I migrated over to this plugin from the now deprecated eslint-plugin-svelte3. The previous one didn't throw this parsing error.

What actually happened?

/parsing-error-eslint-plugin-svelte/src/routes/+page.svelte
  11:45  error  Parsing error: ')' expected

✖ 1 problem (1 error, 0 warnings)

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/AdrianGonz97/parsing-error-eslint-plugin-svelte

Additional comments

No response

ota-meshi commented 1 year ago

Thank you for posting the issue and sharing the repo to reproduce. But it's hard to fix. We probably need to rewrite the parser.

As a workaround, I think the following code will work fine.

    {@html `<\u{73}cript nonce="%sveltekit.nonce%">(${setInitialClassState.toString()})();</script>`}
baseballyama commented 1 year ago

This is parser issue, so I will transfer this issue to svelte-eslint-parser.

Leftium commented 7 months ago

As a workaround, I think the following code will work fine.

  {@html `<\u{73}cript nonce="%sveltekit.nonce%">(${setInitialClassState.toString()})();</script>`}

@ota-meshi : this workaround no longer seems to work with Svelte5. It renders as text instead of a script tag:

image

This code is imported from SkeletonUI: https://github.com/skeletonlabs/skeleton/blob/c2700cba8dd3ad71ab74c22603a94a598d485b81/packages/skeleton/src/lib/utilities/LightSwitch/LightSwitch.svelte#L76-L77