Update dependency svelte to v4 (#38288)

* Update dependency svelte to v4
* Fix eslint: Don't use `svelte-eslint-parser` for `import`.
* Flag type imports as such.
* Ignore some ARIA warnings I have no clue what to do with.

---------

Co-authored-by: Renovate Bot <[email protected]>
Co-authored-by: Brad Jorsch <[email protected]>

Author: 3 people

pnpm-lock.yaml

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.

projects/js-packages/image-guide/changelog/renovate-svelte-4.x

@@ -52,7 +52,7 @@
 		"rollup-plugin-svelte": "7.2.2",
 		"rollup-plugin-svelte-svg": "1.0.0-beta.6",
 		"sass": "1.64.1",
-		"svelte": "3.58.0",
+		"svelte": "4.2.18",
 		"svelte-preprocess": "5.0.4",
 		"tslib": "2.5.0",
 		"typescript": "5.0.4",

projects/js-packages/image-guide/package.json

@@ -1,4 +1,4 @@
-import { derived, Writable, writable } from 'svelte/store';
+import { derived, writable, type Writable } from 'svelte/store';
 
 /**
  * Guide State is a Svelte Store that keeps track

projects/js-packages/image-guide/src/stores/GuideState.ts

@@ -1,4 +1,4 @@
-import { Writable, Readable, writable, derived } from 'svelte/store';
+import { writable, derived, type Writable, type Readable } from 'svelte/store';
 import { MeasurableImage } from '../MeasurableImage.js';
 import type { Dimensions, Weight } from '../MeasurableImage.js';
 

projects/js-packages/image-guide/src/stores/MeasurableImageStore.ts

@@ -35,6 +35,7 @@
 	}
 </script>
 
+<!-- eslint-disable-next-line svelte/valid-compile -- Complains about the div needing an ARIA role, but I have no idea what might be correct for this. -->
 <div
 	class="interaction-area {severity}"
 	bind:this={bubble}

projects/js-packages/image-guide/src/ui/Bubble.svelte

@@ -66,6 +66,7 @@
 </script>
 
 {#if $guideState === 'active'}
+	<!-- eslint-disable-next-line svelte/valid-compile -- Complains about the div needing an ARIA role, but I have no idea what might be correct for this. -->
 	<div
 		class="guide {size}"
 		class:show={show !== false}

projects/js-packages/image-guide/src/ui/Main.svelte

@@ -67,6 +67,7 @@
 
 <svelte:window bind:scrollY />
 <Portal>
+	<!-- eslint-disable-next-line svelte/valid-compile -- Complains about the div needing an ARIA role, but I have no idea what might be correct for this. -->
 	<div
 		class="jetpack-boost-guide-popup keep-guide-open"
 		in:fly={{ duration: 150, y: 4, easing: backOut }}

projects/js-packages/image-guide/src/ui/Popup.svelte

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.