fix: use keys for hmr modules (#11123)

* fix: use keys for hmr modules

* simplify

* lint

* ts

.changeset/brave-gorillas-end.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: use keys for hmr modules

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

@@ -427,7 +427,12 @@ export function client_component(source, analysis, options) {
 			b.export_default(
 				b.conditional(
 					b.import_meta_hot(),
-					b.call('$.hmr', b.member(b.import_meta_hot(), b.id('data')), b.id(analysis.name)),
+					b.call(
+						'$.hmr',
+						b.member(b.import_meta_hot(), b.id('data')),
+						b.id(analysis.name),
+						b.member(b.member(b.literal('import'), b.literal('meta')), b.literal('url'))
+					),
 					b.id(analysis.name)
 				)
 			),

packages/svelte/src/internal/client/dev/hmr.js

@@ -5,15 +5,26 @@ import { get } from '../runtime.js';
 
 /**
  * @template {(anchor: Comment, props: any) => any} Component
- * @param {{ source: import("#client").Source<Component>; wrapper: Component; }} data
+ * @param {{ components: Map<string, { source: import("#client").Source<Component>; wrapper: null | Component; }> }} hot_data
+ * @param {string} key
  * @param {Component} component
  */
-export function hmr(data, component) {
+export function hmr(hot_data, component, key) {
-	if (data.source) {
+	var components = (hot_data.components ??= new Map());
-		set(data.source, component);
+	var data = components.get(key);
+
+	if (data === undefined) {
+		components.set(
+			key,
+			(data = {
+				source: source(component),
+				wrapper: null
+			})
+		);
 	} else {
-		data.source = source(component);
+		set(data.source, component);
 	}
+	const component_source = data.source;
 
 	return (data.wrapper ??= /** @type {Component} */ (
 		(anchor, props) => {
@@ -23,7 +34,7 @@ export function hmr(data, component) {
 			let effect;
 
 			block(() => {
-				const component = get(data.source);
+				const component = get(component_source);
 
 				if (effect) {
 					// @ts-ignore