diff --git a/packages/svelte2tsx/src/htmlxtojsx/index.ts b/packages/svelte2tsx/src/htmlxtojsx/index.ts
index 0b8a99dd5..2fa344bcd 100644
--- a/packages/svelte2tsx/src/htmlxtojsx/index.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx/index.ts
@@ -283,7 +283,7 @@ export function convertHtmlxToJsx(
}
};
- const handleSlot = (slotEl: Node, componentName: string, slotName: string) => {
+ const handleSlot = (slotEl: Node, component: Node, slotName: string) => {
//collect "let" definitions
let hasMoved = false;
let afterTag: number;
@@ -319,7 +319,7 @@ export function convertHtmlxToJsx(
str.appendLeft(afterTag, '{() => { let {');
str.appendRight(
afterTag,
- `} = ${getSingleSlotDef(componentName, slotName)}`+ ';<>',
+ `} = ${getSingleSlotDef(component, slotName)}`+ ';<>',
);
const closeTagStart = htmlx.lastIndexOf('<', slotEl.end);
@@ -340,7 +340,7 @@ export function convertHtmlxToJsx(
}
//we only need to do something if there is a let or slot
- handleSlot(el, el.name, 'default');
+ handleSlot(el, el, 'default');
//walk the direct children looking for slots. We do this here because we need the name of our component for handleSlot
//we could lean on leave/enter, but I am lazy
@@ -348,7 +348,7 @@ export function convertHtmlxToJsx(
for (const child of el.children) {
const slotName = getSlotName(child);
if (slotName) {
- handleSlot(child, el.name, slotName);
+ handleSlot(child, el, slotName);
}
}
};
diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/component-type.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/component-type.ts
index 4f643eb75..55856783b 100644
--- a/packages/svelte2tsx/src/htmlxtojsx/nodes/component-type.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx/nodes/component-type.ts
@@ -1,6 +1,6 @@
import { Node } from 'estree-walker';
-export function getTypeForComponent(node: Node) {
+export function getTypeForComponent(node: Node): string {
if (node.name === 'svelte:component' || node.name === 'svelte:self') {
return '__sveltets_componentType()';
} else {
diff --git a/packages/svelte2tsx/src/nodes/slot.ts b/packages/svelte2tsx/src/nodes/slot.ts
index cad3420d4..b87e929de 100644
--- a/packages/svelte2tsx/src/nodes/slot.ts
+++ b/packages/svelte2tsx/src/nodes/slot.ts
@@ -10,6 +10,7 @@ import {
} from '../utils/svelteAst';
import TemplateScope from './TemplateScope';
import { SvelteIdentifier, WithName, BaseDirective } from '../interfaces';
+import { getTypeForComponent } from '../htmlxtojsx/nodes/component-type';
function attributeStrValueAsJsExpression(attr: Node): string {
if (attr.value.length == 0) return "''"; //wut?
@@ -116,7 +117,7 @@ export class SlotHandler {
component: Node,
slotName: string,
) {
- return `${getSingleSlotDef(component.name, slotName)}.${letNode.name}`;
+ return `${getSingleSlotDef(component, slotName)}.${letNode.name}`;
}
resolveLet(letNode: BaseDirective, identifierDef: WithName, component: Node, slotName: string) {
@@ -258,6 +259,7 @@ export class SlotHandler {
}
}
-export function getSingleSlotDef(componentName: string, slotName: string) {
- return `__sveltets_instanceOf(${componentName}).$$slot_def['${slotName}']`;
+export function getSingleSlotDef(componentNode: Node, slotName: string) {
+ const componentType = getTypeForComponent(componentNode);
+ return `__sveltets_instanceOf(${componentType}).$$slot_def['${slotName}']`;
}
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expected.tsx
new file mode 100644
index 000000000..914d44fe8
--- /dev/null
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expected.tsx
@@ -0,0 +1,14 @@
+///
+<>>;function render() {
+<>{() => {if (true){<>
+{() => { let {prop} = __sveltets_instanceOf(__sveltets_componentType()).$$slot_def['default'];<>
+
+>}}
+>}}}
+{() => { let {prop} = __sveltets_instanceOf(__sveltets_componentType()).$$slot_def['default'];<>
+
+>}}>
+return { props: {}, slots: {'default': {prop:__sveltets_instanceOf(__sveltets_componentType()).$$slot_def['default'].prop}}, getters: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
+}
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/input.svelte b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/input.svelte
new file mode 100644
index 000000000..788704b29
--- /dev/null
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/input.svelte
@@ -0,0 +1,8 @@
+{#if true}
+
+
+
+{/if}
+
+
+