@soleil-se/eslint-config 6.1.0 → 6.2.0

package/CHANGELOG.md

@@ -7,6 +7,14 @@ All changes in this repository are noted here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and the project uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [6.2.0] - 2025-03-31
+
+* Update `eslint-plugin-svelte` version 3.
+* Enable `svelte/html-self-closing`.
+* Enable `svelte/prefer-const`.
+* Allow caught errors to unused in `no-unused-vars`.
+* Add path group override for `#` in `import/extensions`.
+
 ## [6.1.0] - 2025-03-18
 
 * Adjust config for script modules to correct sourceType.

package/config/base.js

@@ -0,0 +1,30 @@
+import globals from 'globals';
+import importPlugin from 'eslint-plugin-import';
+import jsRules from '../rules/js/index.js';
+
+export default function base() {
+  return [{
+    name: 'soleil/base',
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        process: 'readonly',
+        Packages: 'readonly',
+        envision: 'readonly',
+        ...globals.browser,
+      },
+    },
+    ignores: ['dist', 'node_modules', 'prettier.config.js'],
+    plugins: { import: importPlugin },
+    rules: jsRules,
+    settings: {
+      svelte: {
+      // Ignore max-len in template and style, still works for script tags.
+        ignoreWarnings: [
+          'max-len',
+        ],
+      },
+    },
+  }];
+}

package/config/svelte.js

@@ -0,0 +1,31 @@
+import svelteRules from '../rules/svelte/index.js';
+
+async function hasSvelte() {
+  try {
+    await import('svelte');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+export default async function svelte() {
+  if (!await hasSvelte()) return [];
+
+  const { default: eslintPluginSvelte } = await import('eslint-plugin-svelte');
+  const { default: eslintConfigPrettier } = await import('eslint-config-prettier');
+
+  return [
+    ...eslintPluginSvelte.configs.recommended,
+    ...eslintPluginSvelte.configs.prettier,
+    {
+      name: 'soleil/svelte',
+      files: ['**/*.svelte', '**/*.svelte.js', '**/*.svelte.ts'],
+      rules: svelteRules,
+    }, {
+      name: 'soleil/svelte.prettier',
+      files: ['**/*.svelte'],
+      rules: eslintConfigPrettier.rules,
+    },
+  ];
+}

package/eslint.config.js

@@ -2,4 +2,9 @@ import config from './node-config.js';
 
 export default [
   ...config,
+  {
+    rules: {
+      'import/no-extraneous-dependencies': 0,
+    },
+  },
 ];

package/index.js

@@ -1,70 +1,7 @@
-import globals from 'globals';
-import importPlugin from 'eslint-plugin-import';
-
-import jsRules from './rules/js/index.js';
-import svelteRules from './rules/svelte/index.js';
-
-function loadSvelteConfig() {
-  // eslint-disable-next-line import/no-extraneous-dependencies
-  return import('svelte').then(async () => {
-    const { default: eslintPluginSvelte } = await import('eslint-plugin-svelte');
-    const { default: eslintConfigPrettier } = await import('eslint-config-prettier');
-    return [
-      ...eslintPluginSvelte.configs['flat/recommended'],
-      ...eslintPluginSvelte.configs['flat/prettier'],
-      {
-        name: 'soleil/svelte',
-        files: ['**/*.svelte'],
-        rules: {
-          ...svelteRules,
-          ...eslintConfigPrettier.rules,
-        },
-      }, {
-        name: 'soleil/svelte.js',
-        files: ['**/*.svelte.js', '**/*.svelte.ts'],
-        languageOptions: {
-          ecmaVersion: 'latest',
-          sourceType: 'module',
-          globals: {
-            $state: 'readonly',
-            $derived: 'readonly',
-            $effect: 'readonly',
-            $inspect: 'readonly',
-          },
-        },
-        rules: {
-        // Do not enforce const because of reactivity for runes in Svelte 5.
-          'prefer-const': 0,
-        },
-      },
-    ];
-  }).catch(() => []);
-}
+import base from './config/base.js';
+import svelte from './config/svelte.js';
 
 export default [
-  {
-    name: 'soleil/base',
-    languageOptions: {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      globals: {
-        process: 'readonly',
-        Packages: 'readonly',
-        envision: 'readonly',
-        ...globals.browser,
-      },
-    },
-    ignores: ['dist', 'node_modules', 'prettier.config.js'],
-    plugins: { import: importPlugin },
-    rules: jsRules,
-    settings: {
-      svelte: {
-      // Ignore max-len in template and style, still works for script tags.
-        ignoreWarnings: [
-          'max-len',
-        ],
-      },
-    },
-  },
-  ...await loadSvelteConfig(),
+  ...base(),
+  ...await svelte(),
 ];

package/node-config.js

@@ -1,9 +1,11 @@
-import config from './index.js';
+import base from './config/base.js';
 
-export default [...config, {
-  rules: {
-    'import/extensions': ['error', 'ignorePackages', {
-      js: 'always',
-    }],
-  },
-}];
+export default [
+  ...base(),
+  {
+    rules: {
+      'import/extensions': ['error', 'ignorePackages', {
+        js: 'always',
+      }],
+    },
+  }];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/eslint-config",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "ESLint configuration for Sitevision apps and projects.",
   "keywords": [
     "eslint",
@@ -19,17 +19,21 @@
     "./prettier": "./prettier.js",
     "./script-module": "./script-module.js",
     "./node": "./node-config.js",
-    "./rules":"./rules/**/*.js"
+    "./typescript": "./typescript.js",
+    "./config/base": "./config/base.js",
+    "./config/svelte": "./config/svelte.js",
+    "./rules/js":"./rules/js/index.js",
+    "./rules/svelte":"./rules/svelte/index.js"
   },
   "dependencies": {
-    "eslint-config-prettier": "^10.0.1",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-svelte": "^2.46.1",
-    "globals": "^15.14.0"
+    "eslint-plugin-svelte": "^3.4.0",
+    "globals": "^16.0.0"
   },
   "devDependencies": {
-    "eslint": "^9.18.0",
-    "svelte": "^5.17.4"
+    "eslint": "^9.23.0",
+    "svelte": "^5.25.3"
   },
   "peerDependencies": {
     "eslint": ">= 9"

package/rules/js/imports.js

@@ -89,11 +89,24 @@ export default {
 
   // Ensure consistent use of file extension within the import path
   // https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/extensions.md
-  'import/extensions': ['error', 'ignorePackages', {
-    js: 'never',
-    mjs: 'never',
-    jsx: 'never',
-  }],
+
+  'import/extensions': ['error', {
+    ignorePackages: true,
+    pattern: {
+      js: 'never',
+      mjs: 'never',
+      jsx: 'never',
+      json: 'always',
+    },
+    pathGroupOverrides: [{
+      pattern: '**/*.svelte.js',
+      action: 'ignore',
+    }, {
+      pattern: '#*',
+      action: 'ignore',
+    }],
+  },
+  ],
 
   // ensure absolute imports are above relative imports and that unassigned imports are ignored
   // https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/order.md

package/rules/js/variables.js

@@ -109,7 +109,7 @@ export default {
   'no-undefined': 'off',
 
   // disallow declaration of variables that are not used in the code
-  'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
+  'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true, caughtErrors: 'none' }],
 
   // disallow use of variables before they are defined
   'no-use-before-define': ['error', { functions: true, classes: true, variables: true }],

package/rules/svelte/bestPractices.js

@@ -5,4 +5,5 @@ export default {
   'svelte/no-reactive-literals': 'warn',
   'svelte/no-useless-mustaches': 'warn',
   'svelte/no-unused-svelte-ignore': 0,
+  'svelte/prefer-const': 'error',
 };

package/rules/svelte/style.js

@@ -1,6 +1,47 @@
 export default {
   'svelte/no-extra-reactive-curlies': 'warn',
   'svelte/prefer-style-directive': 'warn',
-  'svelte/sort-attributes': 'warn',
   'svelte/spaced-html-comment': 'warn',
+  'svelte/html-self-closing': 'warn',
+  'svelte/html-quotes': 'warn',
+  'svelte/sort-attributes': [
+    'warn', {
+      order: [
+        // `this` property.
+        'this',
+        // `bind:this` directive.
+        'bind:this',
+        // `id` attribute.
+        'id',
+        // `name` attribute.
+        'name',
+        // `slot` attribute.
+        'slot',
+        // `--style-props` (Alphabetical order within the same group.)
+        { match: '/^--/u', sort: 'alphabetical' },
+        // `style` attribute, and `style:` directives.
+        ['style', '/^style:/u'],
+        // `class` attribute.
+        'class',
+        // `class:` directives. (Alphabetical order within the same group.)
+        { match: '/^class:/u', sort: 'alphabetical' },
+        // other attributes.
+        ['!/:/u', '!/^(?:this|id|name|style|class)$/u', '!/^--/u'],
+        // `bind:` directives (other then `bind:this`), and `on:` directives.
+        ['/^bind:/u', '!bind:this', '/^on:/u'],
+        // `use:` directives. (Alphabetical order within the same group.)
+        { match: '/^use:/u', sort: 'alphabetical' },
+        // `transition:` directive.
+        { match: '/^transition:/u', sort: 'alphabetical' },
+        // `in:` directive.
+        { match: '/^in:/u', sort: 'alphabetical' },
+        // `out:` directive.
+        { match: '/^out:/u', sort: 'alphabetical' },
+        // `animate:` directive.
+        { match: '/^animate:/u', sort: 'alphabetical' },
+        // `let:` directives. (Alphabetical order within the same group.)
+        { match: '/^let:/u', sort: 'alphabetical' },
+      ],
+    },
+  ],
 };

package/typescript.js

@@ -0,0 +1,22 @@
+// eslint-disable-next-line import/no-unresolved
+import tseslint from 'typescript-eslint';
+import base from './config/base.js';
+import svelte from './config/svelte.js';
+
+const svelteTypescript = {
+  files: ['**/*.svelte', '**/*.svelte.js', '**/*.svelte.ts'],
+  languageOptions: {
+    parserOptions: {
+      projectService: true,
+      extraFileExtensions: ['.svelte'],
+      parser: tseslint.parser,
+    },
+  },
+};
+
+export default tseslint.config(
+  ...base(),
+  tseslint.configs.recommended,
+  ...await svelte(),
+  svelteTypescript,
+);