Skip to content

Commit 7894f82

Browse files
ota-meshiota-meshi
authored
feat: improve svelte/valid-prop-names-in-kit-pages and svelte/no-export-load-in-svelte-module-in-kit-pages to use svelte.config.js data (#794)
This PR improves the two rules to use `svelte.config.js` data provided by the parser. - `svelte/valid-prop-names-in-kit-pages` - `svelte/no-export-load-in-svelte-module-in-kit-pages`
1 parent cb722bc commit 7894f82

File tree

19 files changed

+237
-7
lines changed

19 files changed

+237
-7
lines changed

‎.changeset/silent-lamps-chew.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'eslint-plugin-svelte': minor
3+
---
4+
5+
feat: improve `svelte/valid-prop-names-in-kit-pages` to use `svelte.config.js` data from the parser.

‎.changeset/silent-lamps-chew2.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'eslint-plugin-svelte': minor
3+
---
4+
5+
feat: improve `svelte/no-export-load-in-svelte-module-in-kit-pages` to use `svelte.config.js` data from the parser.

‎README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,36 @@ for some context.
229229

230230
:::
231231

232+
#### Specify `svelte.config.js`
233+
234+
If you are using `eslint.config.js`, we recommend that you import and specify `svelte.config.js`.
235+
By specifying it, some rules of `eslint-plugin-svelte` will read it and try to behave well for you by default.
236+
Some Svelte configurations will be statically loaded from `svelte.config.js` even if you don't specify it, but you need to specify it to make it work better.
237+
238+
Example **eslint.config.js**:
239+
240+
```js
241+
import eslintPluginSvelte from 'eslint-plugin-svelte';
242+
import svelteConfig from './svelte.config.js';
243+
export default [
244+
...eslintPluginSvelte.configs['flat/recommended'],
245+
{
246+
files: [
247+
'**/*.svelte',
248+
'*.svelte'
249+
// Add more files if you need.
250+
// '**/*.svelte.ts', '*.svelte.ts', '**/*.svelte.js', '*.svelte.js',
251+
],
252+
languageOptions: {
253+
parserOptions: {
254+
// Specify the `svelte.config.js`.
255+
svelteConfig
256+
}
257+
}
258+
}
259+
];
260+
```
261+
232262
#### settings.svelte
233263

234264
You can change the behavior of this plugin with some settings.
@@ -274,6 +304,12 @@ Specifies options for Svelte compile. Effects rules that use Svelte compile. The
274304

275305
#### settings.svelte.kit
276306

307+
::: warning
308+
309+
Even if you don't specify `settings.svelte.kit`, the rules will try to load information from `svelte.config.js`, so specify `settings.svelte.kit` if the default doesn't work.
310+
311+
:::
312+
277313
If you use SvelteKit with not default configuration, you need to set below configurations.
278314
The schema is subset of SvelteKit's configuration.
279315
Therefore please check [SvelteKit docs](https://kit.svelte.dev/docs/configuration) for more details.

‎docs/user-guide.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,36 @@ for some context.
180180

181181
:::
182182

183+
#### Specify `svelte.config.js`
184+
185+
If you are using `eslint.config.js`, we recommend that you import and specify `svelte.config.js`.
186+
By specifying it, some rules of `eslint-plugin-svelte` will read it and try to behave well for you by default.
187+
Some Svelte configurations will be statically loaded from `svelte.config.js` even if you don't specify it, but you need to specify it to make it work better.
188+
189+
Example **eslint.config.js**:
190+
191+
```js
192+
import eslintPluginSvelte from 'eslint-plugin-svelte';
193+
import svelteConfig from './svelte.config.js';
194+
export default [
195+
...eslintPluginSvelte.configs['flat/recommended'],
196+
{
197+
files: [
198+
'**/*.svelte',
199+
'*.svelte'
200+
// Add more files if you need.
201+
// '**/*.svelte.ts', '*.svelte.ts', '**/*.svelte.js', '*.svelte.js',
202+
],
203+
languageOptions: {
204+
parserOptions: {
205+
// Specify the `svelte.config.js`.
206+
svelteConfig
207+
}
208+
}
209+
}
210+
];
211+
```
212+
183213
#### settings.svelte
184214

185215
You can change the behavior of this plugin with some settings.
@@ -225,6 +255,12 @@ Specifies options for Svelte compile. Effects rules that use Svelte compile. The
225255

226256
#### settings.svelte.kit
227257

258+
::: warning
259+
260+
Even if you don't specify `settings.svelte.kit`, the rules will try to load information from `svelte.config.js`, so specify `settings.svelte.kit` if the default doesn't work.
261+
262+
:::
263+
228264
If you use SvelteKit with not default configuration, you need to set below configurations.
229265
The schema is subset of SvelteKit's configuration.
230266
Therefore please check [SvelteKit docs](https://kit.svelte.dev/docs/configuration) for more details.

‎packages/eslint-plugin-svelte/src/rules/no-unused-class-name.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,12 @@ export default createRule('no-unused-class-name', {
5656
}
5757
},
5858
'Program:exit'() {
59-
const styleContext = sourceCode.parserServices.getStyleContext();
60-
if (['parse-error', 'unknown-lang'].includes(styleContext.status)) {
59+
const styleContext = sourceCode.parserServices.getStyleContext!();
60+
if (styleContext.status === 'parse-error' || styleContext.status === 'unknown-lang') {
6161
return;
6262
}
6363
const classesUsedInStyle =
64-
styleContext.sourceAst != null ? findClassesInPostCSSNode(styleContext.sourceAst) : [];
64+
styleContext.status === 'success' ? findClassesInPostCSSNode(styleContext.sourceAst) : [];
6565
for (const className in classesUsedInTemplate) {
6666
if (!allowedClassNames.includes(className) && !classesUsedInStyle.includes(className)) {
6767
context.report({

‎packages/eslint-plugin-svelte/src/types.ts‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import type { JSONSchema4 } from 'json-schema';
22
import type { Linter, Rule, SourceCode as ESLintSourceCode } from 'eslint';
3-
import type { AST } from 'svelte-eslint-parser';
3+
import type { AST, StyleContext, SvelteConfig } from 'svelte-eslint-parser';
44
import type { TSESTree } from '@typescript-eslint/types';
55
import type { ScopeManager, Scope, Variable } from '@typescript-eslint/scope-manager';
66
import type { ASTNode, ASTNodeWithParent, ASTNodeListener } from './types-for-node';
7+
import type * as TS from 'typescript';
78

89
export type { ASTNode, ASTNodeWithParent, ASTNodeListener };
910
export interface RuleListener extends ASTNodeListener {
@@ -201,7 +202,29 @@ export interface SourceCode {
201202
ast: AST.SvelteProgram;
202203
lines: string[];
203204
hasBOM: boolean;
204-
parserServices: ESLintSourceCode.ParserServices;
205+
parserServices: {
206+
isSvelte?: boolean;
207+
isSvelteScript?: boolean;
208+
getSvelteHtmlAst?: () => unknown;
209+
getStyleContext?: () => StyleContext;
210+
svelteParseContext?: {
211+
/**
212+
* Whether to use Runes mode.
213+
* May be `true` if the user is using Svelte v5.
214+
* Resolved from `svelte.config.js` or `parserOptions`, but may be overridden by `<svelte:options>`.
215+
*/
216+
runes?: boolean;
217+
/** The version of "svelte/compiler". */
218+
compilerVersion?: string;
219+
/** The result of static analysis of `svelte.config.js`. */
220+
svelteConfig?: SvelteConfig | null;
221+
};
222+
program?: TS.Program;
223+
esTreeNodeToTSNodeMap?: ReadonlyMap<unknown, TS.Node>;
224+
tsNodeToESTreeNodeMap?: ReadonlyMap<TS.Node, ASTNode>;
225+
hasFullTypeInformation?: boolean; // Old typescript-eslint
226+
[key: string]: unknown;
227+
};
205228
scopeManager: ScopeManager;
206229
visitorKeys: ESLintSourceCode.VisitorKeys;
207230

‎packages/eslint-plugin-svelte/src/utils/svelte-kit.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { RuleContext } from '../types';
66
import fs from 'fs';
77
import path from 'path';
88
import { getPackageJson } from './get-package-json';
9-
import { getFilename } from './compat';
9+
import { getFilename, getSourceCode } from './compat';
1010

1111
const isRunOnBrowser = !fs.readFileSync;
1212

@@ -19,7 +19,11 @@ export function isKitPageComponent(context: RuleContext): boolean {
1919
// Hack: if it runs on browser, it regards as SvelteKit project.
2020
if (isRunOnBrowser) return true;
2121
if (!hasSvelteKit(getFilename(context))) return false;
22-
const routes = context.settings?.svelte?.kit?.files?.routes?.replace(/^\//, '') ?? 'src/routes';
22+
const routes =
23+
(
24+
context.settings?.svelte?.kit?.files?.routes ??
25+
getSourceCode(context).parserServices.svelteParseContext?.svelteConfig?.kit?.files?.routes
26+
)?.replace(/^\//, '') ?? 'src/routes';
2327
const filePath = getFilename(context);
2428
const projectRootDir = getProjectRootDir(getFilename(context)) ?? '';
2529
const fileName = path.basename(filePath);

‎packages/eslint-plugin-svelte/tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/invalid/svelte-config-from-parser-options/+test01-errors.yaml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
- message: disallow exporting load functions in `*.svelte` module in SvelteKit
2+
page components.
3+
line: 2
4+
column: 18
5+
suggestions: null

‎packages/eslint-plugin-svelte/tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/invalid/svelte-config-from-parser-options/+test01-input.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script context="module">
2+
export function load() {}
3+
</script>

‎packages/eslint-plugin-svelte/tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/invalid/svelte-config-from-parser-options/_config.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"languageOptions": {
3+
"parserOptions": {
4+
"svelteConfig": {
5+
"kit": {
6+
"files": {
7+
"routes": "tests/fixtures/rules/no-export-load-in-svelte-module-in-kit-pages/invalid/svelte-config-from-parser-options"
8+
}
9+
}
10+
}
11+
}
12+
}
13+
}

0 commit comments

Comments
 (0)