fix: hoist imports on top (#13082)

Fixes #13081

Author: paoloricciuti

.changeset/hip-beers-shake.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: hoist imports on top

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -457,7 +457,10 @@ export function client_component(analysis, options) {
 		analysis.uses_slots ||
 		analysis.slot_names.size > 0;
 
-	const body = [...module.body, ...state.hoisted];
+	// we hoist all the import declarations to the top of the file
+	const body = [...module.body, ...state.hoisted].sort((body_a, body_b) =>
+		body_a.type === 'ImportDeclaration' && body_b.type !== 'ImportDeclaration' ? -1 : 1
+	);
 
 	const component = b.function_declaration(
 		b.id(analysis.name),

packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js

@@ -1,14 +1,12 @@
 import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
 
 const __ENHANCED_IMG_1__ = "__VITE_ASSET__2AM7_y_a__";
 const __ENHANCED_IMG_2__ = "__VITE_ASSET__2AM7_y_b__";
 const __ENHANCED_IMG_3__ = "__VITE_ASSET__2AM7_y_c__";
 const __ENHANCED_IMG_4__ = "__VITE_ASSET__2AM7_y_d__";
 const __ENHANCED_IMG_5__ = "__VITE_ASSET__2AM7_y_e__";
 const __ENHANCED_IMG_6__ = "__VITE_ASSET__2AM7_y_f__";
-
-import * as $ from "svelte/internal/client";
-
 var root = $.template(`<picture><source type="image/avif"> <source type="image/webp"> <source type="image/png"> <img alt="production test" width="1440" height="1440"></picture>`);
 
 export default function Inline_module_vars($$anchor) {