Support for Svelte v5

[ota-meshi]

• Returns the same AST as before using the new Svelte parser.
  feat: (experimental) partial support for Svelte v5 parser #421
• Support for Runes.
  • Add Runes symbol to global variable.
    feat: Support runes #425
  • Apply correct type information to $derived.
    feat: apply correct type information to $derived argument expression #430
  • Make *.svelte.js and *.svelte.ts files parsable.
    feat: apply runes to *.svelte.js and *.svelte.ts #426
  • $effect.root (added in 5.0.0-next.14) feat: add support for $inspect and $effect.root #446
  • $inspect (added in 5.0.0-next.16) feat: add support for $inspect and $effect.root #446
  • change $inspect API (changed in 5.0.0-next.21) (feat: update $inspect types #467)
  • $state.raw (Finally, it changed to $state.frozen. feat: add $state.frozen rune svelte#9851)
  • $state.frozen feat: add $state.frozen support #466
  • Change to opt-in to rune analysis.
• Support for {#snippet} and {@render} https://svelte-5-preview.vercel.app/docs/snippets
  feat: add support for {#snippet} and {@render} #431
• Support for new event-handlers https://svelte-5-preview.vercel.app/docs/event-handlers
  onxxx seems to be the same as the attribute (prop).
  So no work is required with this parser. However, I think some work is needed with the eslint-plugin.
• Support for type annotation in template.
  (If the expression has type annotations, we should skip the type information that the parser is adding automatically.)
• Use modern AST. feat: change it to use modern AST, if svelte v5 is installed #437
• Waiting for Svelte v5 release.

---

Related to sveltejs/eslint-plugin-svelte#587

[baseballyama]

And we need to hundle .svelte.js file.

[baseballyama]

@ota-meshi

Apply correct type information to $derived.

Does this issue still exist?

[ota-meshi]

The issue still exists.
In the following source code, it is reported by @typescript-eslint/no-unsafe-argument.

export type Info = { n: number };
export function foo() {
  let a: Info | null = $state(null);
  a = null; // *
  const d = $derived(a?.n ? fn(a.n) : null);
                               ^^^
  return {
    get d() {
      return d;
    },
    set(b: Info | null) {
      a = b;
    },
  };

  function fn(n: number) {
    return n * 2;
  }
}

(I don't often do a = null;, but I think you can see that the type information is incorrect.)

DEMO:

https://typescript-eslint.io/play#ts=5.2.2&fileType=.ts&code=CYUwxgNghgTiAEYD2A7AzgF3gEk1DIAXPADwAqAfABRTFkCU8AvBfGQNwBQoksCy6LNlAwAlgDcQwYuWq02jFmy4gAHgAckMLBgCe6hAEkUAMyTN4Ab3gpiKAK4BbAEYgY8AL4qNWrCfsoYBiiqPBmSFSMlpzw8BAgWPLGZvAAPjb2EBAWuBj4IFQOWfRcsVAWRRDs8AD0NfAAVDGIqJjwwDkiElI0APwAdCjwvWEoNIOMdpkQJc1wGPYwQ9GxsQDmCe2RVs2r8POLQ8Clqx4ANLvwaAlUzsTJ5umVUZdlFs4nsefNXpzN-oFgqETGNbBkXG4XnsDksbI14AAmE4eTgooA&eslintrc=N4KABGBEBOCuA2BTAzpAXGUEKQAIBcBPABxQGNoBLY-AWhXkoDt8B6Jge1tieQEMAZolp9oAc1gBbRC3RRE0aB2iRwYAL4h1QA&tsconfig=N4KABGBEDGD2C2AHAlgGwKYCcDyiAuysAdgM6QBcYoEEkJemy0eFYDAruuGAL4g9A&tokens=false

[baseballyama]

Ah got it!

[pboling]

Having a rough time figuring out how to set this up with the new flat config.

[mikededo]

Having a rough time figuring out how to set this up with the new flat config.

I got it working using the following (I do not know your issue, but maybe it helps):

  ...eslintPluginSvelte.configs['flat/recommended'].map(({ rules, ...rest }) => ({
    // Workaround since svelte-eslint's typings are mismatched with ts-eslint's
    rules: {
      ...rules
    },
    ...rest
  })),

[pboling]

@mikededo were you able to get it to parse .svelte files with typescript? That is specifically what I have not been able to get working.

[mikededo]

@pboling Yes. As a heads up, make sure that you update your dependencies as @typescrip-eslint/eslint-plugin and @typescript-eslint/parser have been updated into typescript-eslint. See the following typescript-eslint/typescript-eslint#7935 PR, in which support for flat configs was introduced.

Let me share the full configuration. You'll probably have to adapt things to your liking:

eslint.config.mjs

// @ts-check
import path from 'path';
import { fileURLToPath } from 'url';

import { FlatCompat } from '@eslint/eslintrc';
import eslint from '@eslint/js';
import eslintPluginSvelte from 'eslint-plugin-svelte';
import globals from 'globals';
import svelteEslintParser from 'svelte-eslint-parser';
import tseslint from 'typescript-eslint';

const dirname = path.dirname(fileURLToPath(import.meta.url));
const compat = new FlatCompat({
  resolvePluginsRelativeTo: dirname,
  baseDirectory: dirname
});

// Note: This is from tseslint configuration.
// See: https://typescript-eslint.io/getting-started#step-2-configuration
export default tseslint.config(
  eslint.configs.recommended,
  ...compat.plugins('import'),
  ...compat.extends('prettier'),
  ...eslintPluginSvelte.configs['flat/recommended'].map(({ rules, ...rest }) => ({
    // Workaround since svelte-eslint's typings are mismatched with ts-eslint's
    rules: {
      ...rules
    },
    ...rest
  })),
  {
    plugins: {
      '@typescript-eslint': tseslint.plugin
    },
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        extraFileExtensions: ['.svelte']
      },
      globals: {
        ...globals.browser
      }
    },
    rules: {
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          argsIgnorePattern: '^(_|\\$\\$Props)',
          varsIgnorePattern: '^(_|\\$\\$Props)',
          caughtErrorsIgnorePattern: '^_'
        }
      ],
      '@typescript-eslint/consistent-type-imports': 'error',
      'arrow-body-style': ['error', 'as-needed'],
      'import/extensions': ['error', 'ignorePackages', { '': 'never', tsx: 'never', ts: 'never' }],
      'import/export': 2,
      'import/no-unresolved': 'off',
      'import/order': [
        'error',
        {
          groups: ['builtin', 'external', 'internal', ['parent', 'sibling'], 'index', 'object'],
          pathGroups: [{ pattern: '\\$*/**', group: 'internal' }],
          pathGroupsExcludedImportTypes: ['builtin'],
          'newlines-between': 'always',
          alphabetize: { order: 'asc' }
        }
      ],
      'import/no-duplicates': ['error', { considerQueryString: true }],
      'no-empty-function': ['error', { allow: ['arrowFunctions'] }],
      'no-unused-vars': 'off',
      'sort-imports': ['error', { ignoreDeclarationSort: true }]
    }
  },
  {
    files: ['**/*.svelte'],
    languageOptions: {
      parser: svelteEslintParser,
      parserOptions: {
        parser: '@typescript-eslint/parser',
        svelteFeatures: {
          // Whether to parse the `generics` attribute.
          // See https://github.com/sveltejs/rfcs/pull/38
          experimentalGenerics: true
        }
      }
    },
    rules: {
      // FIXME: Temporary fix to be able to use $t
      // https://github.com/sveltejs/eslint-plugin-svelte/issues/652
      'svelte/valid-compile': 'off'
    }
  },
  {
    ignores: [
      '!.env.example',
      '.DS_Store',
      '.env.*',
      '.git',
      '.vercel',
      '.svelte-kit',
      'build',
      '/package',
      'node_modules',
      'postcss.config.js',
      'tsconfig.tsbuildinfo'
    ]
  }
);

Again, this is my config "as is", so not everything here is what you need in order to make the parser work.

[pboling]

Thanks! I was able to get mine working, and I did not need to use FlatCompat! I posted it here:
sveltejs/eslint-plugin-svelte#732