.eslintignore

@@ -12,5 +12,6 @@
 /explorer-v2/build-system/shim/eslint-scope.*
 /explorer-v2/build-system/shim/eslint-plugin-svelte3.*
 /explorer-v2/build-system/shim/eslint.*
+/explorer-v2/build-system/shim/svelte/*
 !/.vscode
 !/.github

CHANGELOG.md

@@ -1,5 +1,13 @@
 # svelte-eslint-parser
 
+## 0.32.0
+
+### Minor Changes
+
+- [#364](https://github.com/sveltejs/svelte-eslint-parser/pull/364) [`f5de496`](https://github.com/sveltejs/svelte-eslint-parser/commit/f5de4966371e7ceaa43449c561f23b2fe01d018f) Thanks [@ota-meshi](https://github.com/ota-meshi)! - feat: add support for Svelte v4
+
+- [#358](https://github.com/sveltejs/svelte-eslint-parser/pull/358) [`438be64`](https://github.com/sveltejs/svelte-eslint-parser/commit/438be641c211146a86520db7c29b6771f14fe8c8) Thanks [@marekdedic](https://github.com/marekdedic)! - only parsing styles on-demand
+
 ## 0.31.0
 
 ### Minor Changes

explorer-v2/.gitignore

@@ -7,3 +7,4 @@ node_modules
 /build-system/shim/eslint-scope.*
 /build-system/shim/eslint-plugin-svelte3.*
 /build-system/shim/eslint.*
+/build-system/shim/svelte/*

explorer-v2/build-system/pre-build/webpack.config.js

@@ -134,5 +134,11 @@ export default [
 				`
 			})
 		]
+	},
+	{
+		...base,
+		entry: {
+			'svelte/compiler': resolve('../../node_modules/svelte/src/compiler/index.js')
+		}
 	}
 ];

explorer-v2/build-system/shim/module.js

@@ -1,3 +1,6 @@
+export function createRequire() {
+	return null;
+}
 export default {
-	createRequire: () => () => null
+	createRequire
 };

explorer-v2/package.json

@@ -19,7 +19,7 @@
 		"eslint-scope": "^7.0.0",
 		"esquery": "^1.5.0",
 		"pako": "^2.0.3",
-		"svelte": "^3.41.0",
+		"svelte": "^4.0.0",
 		"svelte-eslint-parser": "link:..",
 		"tslib": "^2.5.0"
 	},

explorer-v2/vite.config.js

@@ -18,7 +18,8 @@ const config = {
 			tslib: resolve('./node_modules/tslib/tslib.es6.js'),
 			eslint: resolve('./build-system/shim/eslint.js'),
 			'svelte-eslint-parser': resolve('./build-system/shim/svelte-eslint-parser.js'),
-			'eslint-plugin-svelte3': resolve('./build-system/shim/eslint-plugin-svelte3.js')
+			'eslint-plugin-svelte3': resolve('./build-system/shim/eslint-plugin-svelte3.js'),
+			'svelte/compiler': resolve('./build-system/shim/svelte/compiler.js')
 		}
 	}
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-eslint-parser",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "Svelte parser for ESLint",
   "repository": "git+https://github.com/sveltejs/svelte-eslint-parser.git",
   "homepage": "https://github.com/sveltejs/svelte-eslint-parser#readme",
@@ -10,7 +10,7 @@
   ],
   "funding": "https://github.com/sponsors/ota-meshi",
   "license": "MIT",
-  "packageManager": "pnpm@7.33.0",
+  "packageManager": "pnpm@7.33.2",
   "engines": {
     "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
   },
@@ -45,7 +45,7 @@
     "version:ci": "env-cmd -e version-ci pnpm run build:meta && changeset version"
   },
   "peerDependencies": {
-    "svelte": "^3.37.0 || ^4.0.0-0"
+    "svelte": "^3.37.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {
     "svelte": {
@@ -74,7 +74,7 @@
     "@types/node": "^18.16.16",
     "@types/semver": "^7.5.0",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "~5.59.9",
+    "@typescript-eslint/parser": "~5.60.0",
     "@typescript-eslint/types": "^5.59.9",
     "benchmark": "^2.1.4",
     "chai": "^4.3.7",
@@ -93,7 +93,7 @@
     "eslint-plugin-svelte": "^2.30.0",
     "eslint-plugin-yml": "^1.7.0",
     "estree-walker": "^3.0.3",
-    "locate-character": "^2.0.5",
+    "locate-character": "^3.0.0",
     "magic-string": "^0.30.0",
     "mocha": "^10.2.0",
     "mocha-chai-jest-snapshot": "^1.1.4",
@@ -103,7 +103,7 @@
     "prettier-plugin-svelte": "^2.10.1",
     "rimraf": "^5.0.1",
     "semver": "^7.5.1",
-    "svelte": "^4.0.0-next.1",
+    "svelte": "^4.0.0",
     "svelte2tsx": "^0.6.15",
     "typescript": "~5.1.3",
     "typescript-eslint-parser-for-extra-files": "^0.5.0"

src/meta.ts

@@ -2,4 +2,4 @@
 // This file has been automatically generated,
 // in order to update its content execute "pnpm run build:meta"
 export const name = "svelte-eslint-parser" as const;
-export const version = "0.31.0" as const;
+export const version = "0.32.0" as const;

src/parser/index.ts

@@ -189,7 +189,7 @@ export function parseForESLint(
   const styleElement = ast.body.find(
     (b): b is SvelteStyleElement => b.type === "SvelteStyleElement"
   );
-  const styleContext = parseStyleContext(styleElement, ctx);
+  let styleContext: StyleContext | null = null;
 
   resultScript.ast = ast as any;
   resultScript.services = Object.assign(resultScript.services || {}, {
@@ -198,6 +198,9 @@ export function parseForESLint(
       return resultTemplate.svelteAst.html;
     },
     getStyleContext() {
+      if (styleContext === null) {
+        styleContext = parseStyleContext(styleElement, ctx);
+      }
       return styleContext;
     },
     styleNodeLoc,

tests/fixtures/parser/ast/ts-event02-type-output.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import Component from 'foo.svelte' // Component: any
+    import Component from 'foo.svelte' // Component: typeof SvelteComponent
 </script>
 <button on:click="{e=>{}}"></button> <!-- e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement; } -->
-<Component on:click="{e=>{}}"></Component> <!-- Component: any, e: any -->
+<Component on:click="{e=>{}}"></Component> <!-- Component: typeof SvelteComponent, e: CustomEvent<any> -->

tests/fixtures/parser/ast/ts-event05-type-output.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import Component from './ts-event03-input.svelte'; // Component: any
+    import Component from './ts-event03-input.svelte'; // Component: typeof SvelteComponent
 </script>
 
-<Component on:foo="{e=>{ // Component: any, e: any
+<Component on:foo="{e=>{ // Component: typeof SvelteComponent, e: CustomEvent<any>
     // e.detail is number
     //   `@typescript-eslint/parser` doesn't get the correct types.
     //   Using `typescript-eslint-parser-for-extra-files` will give we the correct types.

tests/fixtures/parser/ast/ts-reactive02-type-output.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writable } from 'svelte/store'; // writable: <T_1>(value?: T_1 | undefined, start?: StartStopNotifier<T_1> | undefined) => Writable<T_1>, writable: <T_1>(value?: T_1 | undefined, start?: StartStopNotifier<T_1> | undefined) => Writable<T_1>
+	import { writable } from 'svelte/store'; // writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>
     let x = "hello" // x: string
     const get = ()=>"hello" // get: () => string
 

tests/fixtures/parser/ast/ts-reactive05-type-output.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writable } from 'svelte/store'; // writable: <T_1>(value?: T_1 | undefined, start?: StartStopNotifier<T_1> | undefined) => Writable<T_1>, writable: <T_1>(value?: T_1 | undefined, start?: StartStopNotifier<T_1> | undefined) => Writable<T_1>
+	import { writable } from 'svelte/store'; // writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>
 
     const a = writable(0) // a: Writable<number>, writable(0): Writable<number>
     $: aValue = $a // $: any, aValue: number, $a: number

tests/fixtures/parser/ast/ts-store01-type-output.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writable } from 'svelte/store'; // writable: <T_1>(value?: T_1 | undefined, start?: StartStopNotifier<T_1> | undefined) => Writable<T_1>, writable: <T_1>(value?: T_1 | undefined, start?: StartStopNotifier<T_1> | undefined) => Writable<T_1>
+	import { writable } from 'svelte/store'; // writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>
 	const a = writable(0) // a: Writable<number>, writable(0): Writable<number>
 	const b = writable(0) // b: Writable<number>, writable(0): Writable<number>
 	const $b = 'abc' // $b: "abc"

tests/fixtures/parser/ast/ts-store02-type-output.svelte

@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-	import { writable } from 'svelte/store'; // writable: <T_1>(value?: T_1 | undefined, start?: StartStopNotifier<T_1> | undefined) => Writable<T_1>, writable: <T_1>(value?: T_1 | undefined, start?: StartStopNotifier<T_1> | undefined) => Writable<T_1>
+	import { writable } from 'svelte/store'; // writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>
 	const a = writable(0) // a: Writable<number>, writable(0): Writable<number>
 	declare const $a: string // $a: string
 </script>