fix reference for namespaced component (#5256)

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 * In SSR mode, do not automatically declare variables for reactive assignments to member expressions ([#5247](https://github.com/sveltejs/svelte/issues/5247))
+* Fix using `<Namespaced.Component/>`s in child `{#await}`/`{#each}` contexts ([#5255](https://github.com/sveltejs/svelte/issues/5255))
 
 ## 3.24.1
 

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -17,6 +17,7 @@ import { Node, Identifier, ObjectExpression } from 'estree';
 import EventHandler from '../Element/EventHandler';
 import { extract_names } from 'periscopic';
 import mark_each_block_bindings from '../shared/mark_each_block_bindings';
+import { string_to_member_expression } from '../../../utils/string_to_member_expression';
 
 export default class InlineComponentWrapper extends Wrapper {
 	var: Identifier;
@@ -484,7 +485,7 @@ export default class InlineComponentWrapper extends Wrapper {
 		} else {
 			const expression = this.node.name === 'svelte:self'
 				? component.name
-				: this.renderer.reference(this.node.name);
+				: this.renderer.reference(string_to_member_expression(this.node.name));
 
 			block.chunks.init.push(b`
 				${(this.node.attributes.length > 0 || this.node.bindings.length > 0) && b`

src/compiler/compile/utils/string_to_member_expression.ts

@@ -0,0 +1,17 @@
+import { MemberExpression, Identifier } from "estree";
+
+export function string_to_member_expression(name: string) {
+	const parts = name.split(".");
+	let node: MemberExpression | Identifier = {
+		type: "Identifier",
+		name: parts[0],
+	};
+	for (let i = 1; i < parts.length; i++) {
+		node = {
+			type: "MemberExpression",
+			object: node,
+			property: { type: "Identifier", name: parts[i] },
+		} as MemberExpression;
+	}
+	return node;
+}

test/runtime/samples/component-namespace/Tooltip.svelte

@@ -0,0 +1 @@
+<p>i am a widget</p>

test/runtime/samples/component-namespace/Widget.svelte

@@ -0,0 +1,5 @@
+<script context="module">
+  import Tooltip from './Tooltip.svelte';
+
+  export const Widget = { Tooltip };
+</script>

test/runtime/samples/component-namespace/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: '<p>i am a widget</p>'
+};

test/runtime/samples/component-namespace/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { Widget } from './Widget.svelte';
+	let widgets = [Widget];
+</script>
+
+{#each widgets as LazyWidget}
+	<LazyWidget.Tooltip />
+{/each}